CODEWITHSUNDEEP
javascriptjqueryanimation
intelis
intelis

Reputation: 8058

Animating long sequences in jQuery

I have to make a long animation with jQuery, full of fadeOuts,fadeIns,slideIns,...

The problem I am having is that my code looks ugly and it is full of callback.
Also, if I want to stop animation for some time like: slideOut->wait 5 seconds->slideIn I have to use delay and I am not sure if that is the best practice.

Example:

/* Slides */
var slide1 = $('div#slide1'),
    slide2 = $('div#slide2'),
    slide3 = $('div#slide3');

$(document).ready(function(){
    slide1.fadeIn(function(){
        slide2.fadeIn(function(){
            slide3.fadeIn().delay(3000).fadeOut(function(){
                slide2.fadeOut(function(){
                    slide1.fadeOut();
                });
            });
        });
    });
});

JSFIddle: http://jsfiddle.net/ZPvrD/6/

Question: Is there any other way of building animations in jQuery, possibly even some great plugin to help me solve this problem?

Thanks!

Upvotes: 0

Views: 96

Answers (3)

Ruan Mendes
Ruan Mendes

Reputation: 92274

Here's the plugin you were looking for :) Does the exact same thing, but is much more flexible than your existing code http://jsfiddle.net/ZPvrD/11/

(function($){
    $.fn.fadeInOut = function(middleDelay) {
        middleDelay = middleDelay || 0; 
        var index = 0,
            direction = 1, // 1: fading in; -1: fading out        
            me = this,
            size = me.size();
        function nextAnimation() {
            // Before the first element, we're done
            if (index === -1 )  { return; }

            var currentEl = $(me.get(index)),
                goingForward = direction === 1,
                isLastElement = index === (size - 1);

            // Change direction for the next animation, don't update index
            // since next frame will fade the same element out
            if (isLastElement && goingForward) {
                direction = -1;
            } else {
                index += direction;
            }

            // At the last element, before starting to fade out, add a delay 
            if ( isLastElement && !goingForward) {
                currentEl.delay(middleDelay);
            }
            if (goingForward) {
                currentEl.fadeIn(nextAnimation);
            } else {
                currentEl.fadeOut(nextAnimation);                    
            }
        }
        nextAnimation();
        return this;
    }        
})(jQuery);

And you call it like

$('div.slideWrapper>div.slide').fadeInOut(3000);

This process of traversing up and down a list of jQuery elements waiting for each animation to finish could be abstracted so that it could be used for other things besides fadeIn and fadeOut. I'll leave that for you to try out if you feel adventurous.

Upvotes: 2

Mohammad Anini
Mohammad Anini

Reputation: 5220

JQuery animations take two parameters (maximum), duration and complete, duration is the time in milliseconds for how long you want your animation to complete, or you can use "slow" or "fast", and the second params complete which is the callback function.

If don't want to use delay, you may make the previous animation slow.

e.g.

slide1.fadeIn(5000, function(){
    slide2.fadeIn();
};

Upvotes: -1

OctoD
OctoD

Reputation: 361

Try this:

 /* Slides */
 var slide = $('div[id*="slide"]');

 $( function(){

      slide.each( function( k ){

            $( this ).delay( 500 * k ).fadeIn();
      });
  });

Upvotes: 0

Related Questions