jquery - Jquery：从第一个到最后一个开始动画列表，每个在上一个LI开始后45ms开始动画

Question

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

我有一个 LI 的列表，我正在尝试让它们动画到正确的 15 像素，完成。问题是，我希望第一个开始，然后 45 毫秒后下一个 LI 动画（下一个开始时第一个 LI 仍处于动画中间），直到它通过所有这些。现在它等到第一个完成，然后动画下一个，这是错误的。

谁能告诉我如何将此功能更正为我上面描述的功能？

$('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'));           
    }) 


}

Answer 1

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/

和反向

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

...我喜欢这种效果。可能会自己用它来做点什么。

Answer 2

您可以一次安排所有动画，使用增加的延迟，例如：

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.