javascript - for 循环动画的导航控件

Question

我有一个简单的动画淡入和淡出无序列表中的每个列表项。 HTML 标记如下:

<ul>
  <li>first par</li>
  <li>second par</li>
  <li>third par</li>
</ul>

<div></div>

空的 div 将通过 jquery 动态包含导航控件的按钮。

脚本如下:

<script>

var ul = $('ul'), li = $('ul li'), li_length = li.length, div = $('div');

//hides all list items
li.hide();

function play (eq){
  eq = (eq===undefined) ? 0 : eq; 

  for(i=eq, d=0; i<li_length; i++, d+=3000){
    li.eq(i).delay(d).fadeIn(1000).delay(1000).fadeOut(1000);
  }
}

//This dynamically appends the nav buttons in the div
li.each(function(i){
  div.append('<button> '+ i + '</button>');
})

//the normal animation going through each list item, fading in and out
play();

var btn = $('div button');

//each button when clicked should animate the corresponding list item (fadein and out), then the next 
li.each(function(i){
   btn.eq(i).click(function(){
     li.stop(true, true);
     li.hide();
     play(i);
   })
})

</script>

当 play() 运行时，它会完成这项工作。但是，当您单击任何导航按钮时，例如第二个列表项正在播放，然后您单击按钮 1(实际上调用 play(1))，for 循环(来自 play())似乎仍在播放，尽管我已使用 .stop() 停止所有列表项的动画。结果是重叠的动画。我是一个菜鸟，对于如何处理这个问题一无所知，这样动画就不会重叠。谁能帮忙？

Answer 1

delay无论您停止当前动画，都将继续运行:

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

你应该使用 setTimeout 而不是 delay并在您的 click 处理程序中取消它:

var timeoutId = setTimeout(function() { [fadeIn/fadeOut] }, delayDuration);

然后从您的click 处理程序:

btn.eq(i).click(function() {
    ...
    clearTimeout(timeoutId);
});

您设置play 运行的方式，您需要为每个li 动画设置和取消超时。

修改

使用setTimeout，您的一些代码可以重写如下:

function play (eq){
    var
        eq = eq || 0,
        i, d; 

    for(i=eq, d=0; i<li_length; i++, d+=3000){

        // store the timeoutID returned by setTimeout on the li itself
        li.data('timeoutId', setTimeout(function() {
                li.eq(i).fadeIn(1000).delay(1000).fadeOut(1000);
            }, d)
        );
    }
}

然后在您的click 处理程序中:

li.each(function(i){
    btn.eq(i).click(function(){
        li.stop(true, true);
        li.hide();

        // grab the timeoutId and clear it
        clearTimeout(parseInt(li.data('timeoutId'), 10));

        play(i);
    });
});

您可能需要为 fadeIn/fadeOut 之间的 delay 额外调用 setTimeout，但希望如此你从上面的代码中明白了这一点。