Question

我在这篇文章How to reset css before repeating sequence上得到了大卫的极大帮助，但是在评论中没有足够的空间来提出我的所有问题。 David将我的JQuery设置为正确，并重写了大部分内容，因为我正走向错误的方向我现在拥有的正是我想要的，文字出现在右边，滑到左边，暂停和淡出。新的文本行做同样的事情，我可以拥有尽可能多的行。

我想了解这里发生了什么，我是一个完整的Noob与JQuery。这是一个工作的jsfiddle - http://jsfiddle.net/Bf49z/13/ - 我已经重新排列了这些线条，所以它们对我来说更有意义。以下是评论中不适合的问题 -

很难理解动画在开始之前停止的原因。

$elements.eq(index).stop()   .animate({

我认为它会在第二次，第三次，第四次重复播放时停止动画？

然后

.animate({"opacity": "1",  //Animate opacity to opaque
    "left": "6px"    //Animate left to 6px
    }, 1000,

使其可见并将其向左移动，需要一秒钟？

我理解

$（this）.delay（3000）.animate（{// Wait 3000ms

那么下一行是否会通过在1秒内改变不透明度来消退？

       .animate({   "opacity": "0"  //Animate opacity to transparent
    }, 1000,

然后接下来的2行重置css？

function(){ //After animation
        $(this).css("left", "400px"); //Reset left

再次感谢您的帮助，希望您不要在意这些问题。罗布

Answer 1

这里的.stop（）函数仅用于装饰，它不会改变任何东西，因此可以轻松切割。
完全
准确
准确

Answer 2

对.stop()的调用将停止该元素正在进行的任何动画。但由于不应该有，所以在你的情况下是没有必要的。它通常在鼠标事件触发动画时使用。在这种情况下，您可能需要在开始新动画之前停止正在进行的动画。

您的其他问题的答案都是“是”，但.delay()适用于动画队列，因此您不必将其置于“完整”功能中。

因此，您可以将代码缩短为：

(function animate(index) {
    $elements.eq(index)
        .animate({ opacity: '1', left: '6px' }, 1000)
        .delay(3000)
        .animate({ opacity: '0' }, 1000, function() {
            $(this).css({ left: '400px' });
            animate((index + 1) % $elements.length);
        });
})(0);

jsfiddle

试图理解JQuery例程

2 个答案: