悬停时快速浏览图像，动画速度不规则

Question

上下文：我有一块图像，绝对位于彼此之上。鼠标悬停时，通过添加一个 css 类将图像移动到堆的顶部，图像会一个接一个地显示。当到达最后一个图像时，将显示第一个图像，并且这种情况将持续到鼠标移出为止。

参考：这里有一个参考站点，可以看到类似的效果。 （将鼠标悬停在图像块上）。

HTML：

<div id="flicker">
    <img src="example1.gif" />
    <img src="example2.gif" />
    <img src="example3.gif" />
</div>

代码：

var flickerImg = jQuery('#flicker img');

jQuery('#flicker').hover(
      function() {
        flicker = setInterval(function() {
          if (flickerImg.last().hasClass('active')) {
            flickerImg.removeClass('active').first().addClass('active');
          }
          else {
            jQuery('#flicker img.active').removeClass('active')
                                         .next().addClass('active');
          }
       }, 100);
    },
    function() { 
        clearInterval(flicker); 
    });

问题：经过几次迭代后，动画似乎加快了速度。是否有更好的编码方法，或者进行更改以提供更一致的动画？

Answer 1

我设置了一个示例，说明如何模仿参考站点 http://jsfiddle.net/brianflanagan /kLJd3/。我不确定我是否看到您所经历的速度加快，尽管有时感觉它正在加速。我让它运行了 5 分钟左右，看看效果是否持续，但没有。我怀疑这可能更多的是一种视错觉。我在 Chrome 11 中进行了测试，并尝试了不同的间隔设置，看看它是否有任何区别，但无论间隔如何，它似乎都能一致地执行。