JQuery Animation Question

Question

Hello,

I have created a jquery animation that can be seen by clicking the Preview button on top:

http://jsbin.com/anayi3/edit

I have used the slideDown animation method. The problem is that all items slide down together. I want to each number to display after short delay. It should not be much of problem for experienced jquery developers.

How to do that?

Thanks in advance.

Answer 1

You'l need to use the callback function to animate the next number after the first has finished. See the documentation.

Something like:

$('firstNumber').slideDown('slow',function(){ 
    $('secondNumber').slideDown('slow');
});

You'll need to call this recursively for each of the numbers.

Answer 2

Try this:

var index = 0;

function animate() {
  elem = $("div:eq(" + index + ")");
  elem.slideDown('slow');
  index++;
  if (index < 10) {
    setTimeout(animate, 500);
  }
}

$(function(){

  for(var i = 1; i < 10 ;i++){
    var elem = $('<div>').html('Number : ' + i).appendTo($('body')).hide();
  }
  animate();
});

Answer 3

Basically you need to attach all animations to some element's queue in order to run them sequentially

$(function(){
    $.each([1, 2, 3, 4, 5, 6, 7, 8, 9], function() {
        var elem = $('<div>').html('Number : ' + this).appendTo($('body')).hide();
        $("body").queue(function(next) {
            elem.slideDown('slow', next)
        });
    });
});

Here all animations are attached to "body", but that can be any element. The "next" syntax is new in jquery 1.4.

Answer 4

An example using recursive anonymous function. Put this inside your document-ready function.

  // Array of elements to be animated.
  var elements = $('.your-selector-here li').get();

  (function () {
    // Take out the first element of array, animate it
    // and pass this anonymous function as callback.
    $(elements.shift()).slideDown('slow', arguments.callee);
  })();
​