Javascript 如何使用JQuery创建循环动画

我已经在这上面坐了几个小时，想不出这个。我正在尝试创建一个无休止循环的幻灯片（3张幻灯片）。每张幻灯片都是一张li inside#幻灯片。我已经用一个调试器完成了这个过程，所有变量都设置正确，但我不明白为什么动画不会真正发生。我有这样一个功能，它最终会在页面上显示所有图像：

$(document).ready(function() {
$slideshow = $('#slideshow');

$slideshowItems = $slideshow.find('li');

$slideshowItems.hide();

nextI = function(x) {       
        if ((x+1) < $slideshowItems.length) {
            return x+1;
        }
        else {
            return 0;
        }
    }

animation = function(i) {       
    $slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, animation(nextI(i)));
}

animation(0);

这就像预期的那样工作，但它看起来很丑陋，并且不循环

---

知道我为什么不能让它工作吗？我觉得这与我对JQuery/JS如何修改DOM或浏览器用于执行动画的序列的期望是一致的。谢谢你的帮助

我会尝试将其设置为函数，然后使用setInterval：

setInterval(function(){
    $slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500, function() {
       $slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500, function() {
           $slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500);
       });
    });
}, 6000); // 6000 milliseconds before loops

---

我会尝试将其设置为函数，然后使用setInterval：

setInterval(function(){
    $slideshowItems.eq(0).fadeIn(500).delay(1000).fadeOut(500, function() {
       $slideshowItems.eq(1).fadeIn(500).delay(1000).fadeOut(500, function() {
           $slideshowItems.eq(2).fadeIn(500).delay(1000).fadeOut(500);
       });
    });
}, 6000); // 6000 milliseconds before loops

---

您应该指定一个回调方法，但是您的“动画（nextI（i））”没有返回任何内容，因此在淡出完成后，没有什么要做的

我认为这样做会奏效：

var animation = function(i) {       
   $slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, function (){
      animation(nextI(i));
   });
}

---

你应该指定一个回调方法，但是你的“动画（nextI（i））”什么也不返回，所以在淡出完成后就没有什么要做的了

我认为这样做会奏效：

var animation = function(i) {       
   $slideshowItems.eq(i).fadeIn(500).delay(1000).fadeOut(500, function (){
      animation(nextI(i));
   });
}

---

---

您的代码（位于底部）按预期工作，但实际上无法工作。我假设你一定在里面包含了一些匿名函数，你的代码（在底部）按照预期的方式工作，但实际上不会工作。我想你一定在里面包含了一些匿名函数。我把他说的有效的代码，放了一个setInterval，怎么不正确？你可以调整毫秒数来匹配动画的长度……因为他说的代码不起作用。它需要匿名函数作为回调函数运行。但即便如此，时机也不确定。正如你所说，它是可以调整的。适当的间隔应为6000ms。即使这样，你也可能会发现问题，因为在某些浏览器中，这类计时器非常不准确，所以如果它运行足够长的时间，它可能会开始看起来非常不同步。或者，如果切换浏览器选项卡，计时器在某些浏览器中会做一些有趣的事情。看看。此外，初始动画将被延迟。我知道递归函数会更好地工作，不幸的是，我的答案是匆忙的，因为假期的乐趣，希望我以后有机会纠正/更新它。谢谢你让我知道浏览器之间的错误，我不知道。我为你更新了它以添加所需的匿名函数（需要同行审查），并删除了-1。我接受了他说有效的代码，并在其周围放置了一个setInterval，这怎么不正确？你可以调整毫秒数来匹配动画的长度……因为他说的代码不起作用。它需要匿名函数作为回调函数运行。但即便如此，时机也不确定。正如你所说，它是可以调整的。适当的间隔应为6000ms。即使这样，你也可能会发现问题，因为在某些浏览器中，这类计时器非常不准确，所以如果它运行足够长的时间，它可能会开始看起来非常不同步。或者，如果切换浏览器选项卡，计时器在某些浏览器中会做一些有趣的事情。看看。此外，初始动画将被延迟。我知道递归函数会更好地工作，不幸的是，我的答案是匆忙的，因为假期的乐趣，希望我以后有机会纠正/更新它。谢谢你让我知道浏览器之间的错误，我不知道。我为你更新了它以添加所需的匿名函数（需要同行审查），并删除了-1。谢谢！似乎我的错误是我假设传递的动画（nextI（I））将实际进入函数并执行调用。我还是不明白为什么没有？为什么它必须包装在匿名函数中？谢谢！似乎我的错误是我假设传递的动画（nextI（I））将实际进入函数并执行调用。我还是不明白为什么没有？为什么它必须包装在匿名函数中？谢谢！这是一个更整洁的实现！那么循环实际上是在执行退出函数之后执行的？为什么不在淡出（500，循环）执行后立即执行？谢谢@mm2887:

循环

作为第二个参数传递给

淡出

，这意味着它将在淡出完成后执行。因此，立即执行

循环

函数的两行，动画（延迟）运行时间为2000ms，然后当

淡出

完成时，调用

循环

，重新开始过程。请记住，函数是可以像任何其他对象一样传递的对象。因此，您可以将一个函数作为参数传递给另一个函数，并让另一个函数在以后为您调用它。@RightSaidFred：这很有意义，谢谢。我仍在试图理解为什么我最初的实现无法工作。是不是因为我在传递一个对animation（）的调用，而该调用是在fade（）实际执行之前执行的，导致了一个fade实际上从未执行的无休止循环？@mm2887:是的，您是在立即进行递归

animation（）

调用，而不是传递函数。这就是为什么我将

I

的增量取为外部，而不是将

I

作为参数传递。因为我不需要向

animation（）

函数发送参数，所以我可以直接传递函数本身。另一种方法是将

动画（nextI（i））

的调用封装在一个匿名函数中，比如@TiC。通过这种方式，您将传递一个函数对象，该对象将在以后调用

动画
函数。@RightSaidFred非常感谢！这真的有助于我的理解。谢谢！这是一个更整洁的实现！所以，瞧