Jquery: animate a list starting with the first going to the last, each starts to animate 45ms after the prev LI started

http://jsfiddle.net/nicktheandroid/QSdUz/5/

I have a list of LI's, i'm trying to make them animate to the right 15px, done. The problem is, I want the first one to start, then 45ms later the next LI animates(the first LI will still be in mid animation when the next one starts), until it goes through all of them. Right now it waits until the first one completes, then animates the next one, which is wrong.

Can anyone show me how to correct this functionality to be what I described above?

$('UL').hover(function(){

    doSlide($('UL li:first'))

}, function() {

    doReverseSlide($('UL li:first'))

})

function doSlide(current) {
开发者_运维技巧    $(current).animate({
        right:0
    },200).delay(45, function(){
            doSlide($(current).next('li'));           
    }) 


}

---

function doSlide(current) {
    $(current).animate({
        right:0
    },200);
    // mix some javascript in with your jQuery ;)
    setTimeout(function(){
            doSlide($(current).next('li'));           
    },45);
}

http://jsfiddle.net/QSdUz/6/

and with reverse

http://jsfiddle.net/QSdUz/7/

... I like the effect. Might use it myself for something.

---

You could schedule all the animations at once, using an increasing delay, like:

function doSlide() {
    window.slideOffset = 0;
    jQuery.each($("li"), function() {
        setTimeout($(this).animate, window.slideOffset, {right:0}, 200);
        window.slideOffset += 45;
    });
}

Note that this may require patching setTimeout() to work correctly in IE, as described here.