Databases
StackOverflow2013
Postsdbo
POWhy do I need this Callback function in order to work properly?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy do I need this Callback function in order to work properly?
    text
    copied!<p>I'm working through a jQuery image slider tutorial and I lost them at the point where they put a Callback function on the .animate() option - the callback is the removeClass. Why do I need it? If I take the callback function out, the slider stops working.</p> <p><code>function slideSwitch() { var $active = $('#slideshow IMG.active'); var $next = $active.next();</p> <pre><code>$active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active') .animate({opacity: 1.0}, 1000, function() { $active.removeClass('active last-active'); }); </code></pre> <p>}</p> <p>$(function() { setInterval( "slideSwitch()", 5000 ); }); </code></p> <p><strong>This is how the slider works:</strong></p> <p>Basically, there are 3 images positioned (absolutely) on top of each other. The first image is given the class "active" with a high z-index, so it shows up on top. </p> <p>After 5 seconds, the code then finds the next image and makes that the class "active", and makes the original one ".last-active", which has a slightly lower z-index. The new ".active" is given an opacity of 0.0 but slowly animated to 1.0 in a second.</p> <p>It's quite a simple slider, actually. I understand everything else apart from why I need that callback function that removes the classes "last-active" and "active" after the animate is complete. Doesn't ".active" need to stay as ".active" to be on top?</p> <p>It might help you to help me if you saw the tutorial yourself. It can be found at: <a href="http://jonraasch.com/blog/a-simple-jquery-slideshow" rel="nofollow">http://jonraasch.com/blog/a-simple-jquery-slideshow</a></p> <p>Thanks in advance!</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