Question

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

Answer 1

完成最后一步后，你调用函数让它重复，但这次没有参数（因此没有持续时间），将内部的一个更改为：

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*/

用jQuery动画图标

1 个答案: