Question

背景：我有一块图像，绝对位于彼此之上。在鼠标悬停时，通过添加将图像移动到堆顶部的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); 
    });

问题：动画似乎在几次迭代后加速。是否有更好的编码方式，或更改以提供更一致的动画？

Answer 1

我设置了一个示例，说明如何模仿http://jsfiddle.net/brianflanagan/kLJd3/处的参考站点。我不确定我是否看到你正在经历的加速，尽管有时它感觉感觉就像它正在加速一样。我让它运行了5分钟左右，看看效果是否持续，但事实并非如此。我怀疑它可能比其他任何东西更像是一种视错觉。我在Chrome 11中进行了测试，并尝试了不同的间隔设置以查看它是否有任何区别，但无论间隔时间如何，它似乎始终为我执行。

在悬停时动画图像，不规则的动画速度

1 个答案: