如何通过 li 元素进行动画处理，两者之间的延迟很小答案

【问题标题】：How to animate through li elements with a small delay in between如何通过 li 元素进行动画处理，两者之间的延迟很小
【发布时间】：2015-01-12 18:17:12
【问题描述】：

我希望每个 li 元素一个接一个地在屏幕上移动，每个元素之间有一点延迟。

每个 li 元素的动画应该在前一个元素完成动画之前开始。

这是我目前所拥有的：

$("#navright ul li:nth-child(1)").animate({marginLeft:'115px'},500).delay(150);
$("#navright ul li:nth-child(2)").animate({marginLeft:'115px'},500).delay(150);    
$("#navright ul li:nth-child(3)").animate({marginLeft:'115px'},500).delay(150);
$("#navright ul li:nth-child(4)").animate({marginLeft:'115px'},500);

【问题讨论】：

不确定你的意思。你在谈论这样的事情吗？ jsfiddle.net/xcvc2uwm
就是这样。完美的。请发布，以便我将其标记为正确答案...
与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?.

标签： jquery jquery-animate html-lists

【解决方案1】：

基本上，您正在寻找的是渐进式延迟。这最好通过循环来完成（我的示例将使用 jQuery 的 .each() 方法）。一般概念是以受控方式增加延迟。我上面的评论适用于当前的 4，但从缩放的角度来看，这通常不是一个好方法。它创造了一个几乎指数级的加班增长。我下面的示例将总延迟加上初始延迟的三分之二作为延迟随时间增加的因素。原始代码的唯一真正问题是您需要在调用.animate() 之前调用.delay()。下面是我更新的示例。

演示：http://jsfiddle.net/xcvc2uwm/1/

var d = 150, factor = d / 3 * 2; // increment delay by two thirds original delay
$("#navright ul li").each(function(){
    $(this).delay(d = d + factor).animate({marginLeft:'115px'},500);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="navright">
    <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
    </ul>
</nav>

希望这会有所帮助。

【讨论】：