2

我用 jQUery 制作了一个图标动画。第一个周期很好，但是当它重新启动下一个周期时，整个事情都加快了。有谁知道为什么？

我不知道这是否是最好的方法，但我不知道任何其他方法。
它不是 gif 的原因是为了 alpha 透明度。

示例： http: //jsbin.com/ESuGAXe/1/edit ?js,output

jQuery：

jQuery(function() {
    var plusicon = jQuery('.icon.plus');
    animateIcon(plusicon, 3000);

    function animateIcon(plusicon, duration) {
        jQuery('.sprite1', plusicon).stop(true).animate({'opacity':0}, duration, function() {
            jQuery('.sprite2', plusicon).stop(true).animate({'opacity':0}, duration, function() {
                jQuery('.sprite3', plusicon).stop(true).animate({'opacity':0}, duration, function() {
                    animateIcon();
                });
                jQuery('.sprite1', plusicon).stop(true).animate({'opacity':1}, duration);
            });
            jQuery('.sprite3', plusicon).stop(true).animate({'opacity':1}, duration);
        });
        jQuery('.sprite2', plusicon).stop(true).animate({'opacity':1}, duration);
    }
});
4

1 回答 1

5

完成最后一步后，您调用该函数以使其重复，但这次没有参数（因此没有持续时间），将内部更改为：

animateIcon(plusicon, duration);

这种递归最终会导致错误，更简洁的方法是将其包装在 setInterval() 中，如下所示：

function animateIcon(plusicon, duration) {
  jQuery('.sprite1', plusicon).stop(true).animate({'opacity':0}, duration, function() {
    jQuery('.sprite2', plusicon).stop(true).animate({'opacity':0}, duration, function() {
      jQuery('.sprite3', plusicon).stop(true).animate({'opacity':0}, duration);
      jQuery('.sprite1', plusicon).stop(true).animate({'opacity':1}, duration);
    });
    jQuery('.sprite3', plusicon).stop(true).animate({'opacity':1}, duration);
  });
  jQuery('.sprite2', plusicon).stop(true).animate({'opacity':1}, duration);
}

setInterval(function(){animateIcon(plusicon, 3000);}, 9000); /*enough time for all steps to complete*/
于 2013-09-13T08:29:11.347 回答