如何通过 li 元素设置动画，中间有一个小延迟

Question

我希望每个 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);

Answer 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>

希望这对您有所帮助。

如何通过 li 元素设置动画，中间有一个小延迟

How to animate through li elements with a small delay in between

jquery

jquery-animate

html-lists