Need Help Implementing The Sequencing Of Jquery Instructions

The problem: I have a simple function and I need the instructions within it to take place one at a time. Here it is: showImages = (current_time, exercise) -> $('#slideshow img

Solution 1:

jQuery's fadeOut() method has a complete callback which can be used as a function:

.fadeOut( [duration ] [, complete ] )

This can be used as:

$(elem).fadeOut(500, function() { ... });

Therefore, in your case you can simply:

$('#slideshow img.active').first().fadeOut(500, function() {
    $(this).removeClass('active');
    $('#new-image').addClass('active');
});

With this, the currently .active element will lose its class and the #new-image will gain the active class after the fadeOut() has finished.

Solution 2:

Use the fadeOut() complete function:

$('#slideshow img.active').first().fadeOut(500, function() {
  $(this).removeClass('active');
  $('#new-image').addClass('active');
});

Any code within the complete function is executed when the animation has finished

Solution 3:

try this hope this helps. heres a quick jsFiddle

    $('#slideshow img.active').first()
    .fadeOut(500).removeClass('active')
    .setTimeout(function(){
      $('#new-image').addClass('active')
    },100);