Jquery：从第一个开始到最后一个对列表进行动画处理，每个在上一个 LI 开始后 45 毫秒开始进行动画处理

发布于 2024-11-19 05:22:58 字数 606 浏览 4 评论 0原文

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

我有 LI 的列表，我正在尝试让它们向右移动 15px，完成。问题是，我希望第一个开始，然后 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'));           
    }) 


}

原文

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


}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

|煩躁 2024-11-26 05:22:58

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/

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

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.

回复收藏 0 原文

你好，陌生人 2024-11-26 05:22:58

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

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

请注意，这可能需要修补 setTimeout() 才能在 IE 中正常工作，如此处。

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.

回复收藏 0 原文

~没有更多了~