Question

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.

function slideSwitch() {
var $active = $('#slideshow IMG.active');
var $next = $active.next();

$active.addClass('last-active');

$next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });

}

$(function() {
setInterval( "slideSwitch()", 5000 );
});


This is how the slider works:

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.

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.

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?

It might help you to help me if you saw the tutorial yourself. It can be found at: http://jonraasch.com/blog/a-simple-jquery-slideshow

Thanks in advance!

Answer 1

That callback is removing the classes from the previously active slide ($active).

$next becomes the new active slide (and gets the class from the statement just prior to animate).

If the code didn’t remove the class from $active there would be two active slides after all is said and done.