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

【问题标题】：Flick throught images on hover, irregular animation speed悬停时浏览图像，动画速度不规则
【发布时间】：2011-06-02 01:54:35
【问题描述】：

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

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

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); 
    });

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

【问题讨论】：

哦，html就是：
嗨，丹，您编辑了什么以供将来参考？
我相信他只是从您的第一条评论中提取了 HTML 并将其添加到问题中
您可以通过单击编辑日期来查看修订：stackoverflow.com/posts/6178927/revisions

标签： jquery animation flicker

【解决方案1】：

我设置了一个示例来模拟http://jsfiddle.net/brianflanagan/kLJd3/ 的参考站点。我不确定我是否看到您正在体验的加速，尽管有时它确实感觉就像它正在加速。我让它运行了 5 分钟左右，看看效果是否持续，但它没有。我怀疑这可能更像是一种错觉，而不是其他任何东西。我在 Chrome 11 中进行了测试，并尝试了不同的时间间隔设置以查看它是否有任何区别，但无论时间间隔如何，它似乎都能始终如一地执行。

【讨论】：