CODEWITHSUNDEEP
jqueryjquery-animatedelay
pinhead
pinhead

Reputation: 1057

jQuery .animate() unintentionally waits a few seconds before executing

I'm using jQuery .animate all over this page and everything works really great, except this one line, which hides a "Goal Completed" message to the user after the user clicks on the message. I'm including the whole function, although the mystery is in the chained line of animate commands. I'm using .animate() for the graceful stuff, then quick-and-dirty .css() once the object is out of sight of the user... Seems like no matter what I tweak, this one div just will not animate until a long delay has passed...

stuff I've tried already:

1) separating out the chain of jQuery commands to one-at-a-time: --> result: all animations perform at the same time, EXCEPT that first one STILL waits 8 seconds before executing

2) exact same code as written, but switch in a random div elsewhere on the page besdies "#kbm" which obviously is the one I really want to hide --> result: the newly selected div behaves properly, all animation happens in a timely manner in the correct sequence

3) re-arranging the order of elements in the HTML

4) trying position: relative instead of absolute

5 )removing the .css commands from the script and just using .animate for everything

JAVASCRIPT:

function loadnextpage(response)
{

    word = response["word"];
    imgarray = response["imgarray"];
    loadgame();

    $("#kbm").animate({"top": "-340"},500,function(){
        $("#kbm").css("top","-1000px");
        $(".key").animate({"left": "0px"},1000,function(){
            $("#keyboard").css("overflow", "visible");
        });
    });

}

HTML:

<body>
<div id="pagec">

    <div id="mainc">
        <div id="wordpic"><div id="wordpicbg" class="bg"></div></div>
        <div id="wordblanks"><div id="wordblankbg" class="bg"></div></div>
        <div id="keyboard">
            <div id="keyboardbg" class="bg"></div>
            <div id="kbm"><img src="i/medal.png"><img src="i/arrow.png" id="arrow" onclick="loadnext()"></div>
        </div>
    </div>
</div>
</body>

CSS:

#kbm
{
    display: inline-block;
    position: absolute;
    left: 340px;
    top: -1000px;
    width: 500px;
    height: 340px;
}

Upvotes: 1

Views: 469

Answers (1)

stlvc
stlvc

Reputation: 823

.stop() prevents this behaviour, because the animation queue is cleared before moving to the next animation. Animations times and built in delays (with .delay()) can sum up to delays in your animation cue, especially when your animating many elements.

Read more about it here: http://api.jquery.com/animate/ (the part about queues).

Upvotes: 1

Related Questions