Databases
StackOverflow2013
Postsdbo
PONested jQuery animate callback function fires with animation duration delay
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PONested jQuery animate callback function fires with animation duration delay
    text
    copied!<p>I just discovered some strange behavior with the jQuery .animate() function and it's optional callback function. Basicly I have two functions: </p> <p>The first one scrolls the page up to the top. This is done via the .animate() function which is inside this function. The .animate() function then fires a callback function, once the animation is done. The callback function is passed through on the first function's call. So the second function is the passed through function. This is suppossed to move the page to the left or right (depending on what was cklicked). Kind of like a slider.</p> <p>What I want to achieve is that the first animation runs and after it is finished, the second animation runs. So there should be a movement first up and then to left/right. This is allready working BUT: After the first animation is done, the second runs AFTER a delay which is exactly as long as the first animation duration (I tested it, with different animation durations. The delay changes accordingly). So the animation goes: up, delay, left/right.</p> <p>When I put the callback function out of the animation function both animations run at the same time resulting in a diagonal movement.</p> <p>For better understanding, here's the code:</p> <p>First function, for scrolling the page up:</p> <pre><code>function scrollUp(f){ if ($.browser.opera) { var target = 'html'; }else{ var target = 'html,body'; } $(target).animate({ scrollTop: 0 }, 1500, "swing", function(){ if (typeof f == "function") f(); }); }; </code></pre> <p>The second function for moving the page sideways:</p> <pre><code>function moveContent(i){ $("div#page_wrap").animate({ left : - (wrapper_width * i) + "px" }, 2000, function(){ //do several things here }); }; </code></pre> <p>And here is how I combine them:</p> <pre><code>scrollUp(function(){ moveContent(1); }); </code></pre> <p>This results to an animation first scrolling up, then waiting for 1500 milliseconds and then moving left or right.</p> <p>When I do it like this:</p> <pre><code>function scrollUp(f){ if ($.browser.opera) { var target = 'html'; }else{ var target = 'html,body'; } $(target).animate({ scrollTop: 0 }, 1500, "swing"); //callback outside of .animate() if (typeof f == "function") f(); }; </code></pre> <p>Both animations run at the same time or rather the second animation starts while the first is still running.</p> <p>Does anyone has an idea why this delay is happening and/or how I can avoid it? </p> <p>Thx!</p> <p>Edit:</p> <p>Ok, I found the mistake. It was in the way I was calling the functions:</p> <pre><code>$(".level_2 li a").click(function(){ var s = $(document).scrollTop(); if(s &gt; 0){ // &lt;- this here was the problem scrollUp(); } if($(this).hasClass("mw") == true){ if(s &gt; 0){ scrollUp(function(){ moveContent(1); }); }else{ moveContent(1); } } }); </code></pre> <p>It was actually the first if-statement in the click function. It moves the page up then checks which link was clicked and calls the scrollUp() function again. And that actually causes the delay. Removed the if-statement and now it works just fine.</p> <p>Sorry that I didn't see this as part of the problem in the first place (so I didn't post it in the question), guess I didn't see the wood for the trees.</p> <p>Anyways thanks a lot for the comments!</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload