Question

Is there a plugin I can use for Queuing the animations.

I see jQuery.Queue() and callback function as option but my issue is the Queue(“fx”) is not working for my div since it has more than one DOM.

basically, I have a animation functions that visualizes sorting and I wanted it to happen one by one. I am about to write a custom queue..but wondering whether there is a plugin that exists that take care of queueing and gives the capability to run an animation step by step.

It would be a great help if someone can tell me the best option to make a animation with multiple div to happen one by one

edit :http://jsfiddle.net/realwork007/tnJug/

the fiddle do not work but if you look into the selectionSort() it calls the various animation methods.If I run I want the animation function to run step by step but currently all run simultaneously.

Answer 1

Here’s a little script that might help. I use it often to fade images one by one.

$.fn.fade1by1 = function (options) {

    var opt = $.extend({
            'delay' : 500,
            'speed' : 500,
            'ease' : 'swing' // Other requires easing plugin
        }, options);

    var that = this;
    for (var i = 0, d = 0, l = that.length; i < l; i++, d += opt.delay)
        that.eq(i).delay(d).fadeIn(opt.speed, opt.ease);

    return this

};

Demo: http://jsfiddle.net/elclanrs/9Zxew/