jquery - 正确清除jQuery动画

Question

在我的代码中，我在每个轮播元素上为对象设置动画，如下所示:

first_text1.fadeTo(textDuration, 1, function(){
    second_text1.fadeTo(textDuration, 1);
});

当幻灯片发生变化时，我调用以下代码，其中 $animations 包含添加了任何动画的所有对象:

$animations.stop(true, true);

然后我调用:

$animations.each(function() {
    $(this).removeAttr('style');
}); 

删除动画留下的任何内联 CSS，以便我可以在返回到该幻灯片时重复动画。

我的问题是样式永远不会从上面代码中的 second_text1 中的第二个回调动画中移除。

我该如何解决这个问题？

Answer 1

没有看到 $animations，很难说为什么 second_text1 的样式没有被删除。然而，根据个人经验，我注意到 jQuery(':animated') 的问题在于它只能找到处于动画过程中的对象。动画完成的那一刻，对象不再考虑 :animated。

话虽这么说，我建议为您想要动画的每个对象添加一个类，并将其用作选择器而不是 $animations。

因此我将进行以下更改:

1. 在动画之前添加类，在本例中为 .fadeTo()

   first_text1.addClass('animatedClass').fadeTo(textDuration, 1, function(){
       second_text1.addClass('animatedClass').fadeTo(textDuration, 1);
   });
   

2. 将$animations改成类

   $('.animatedClass').stop(true, true);
   
   $('.animatedClass').each(function() {
       $(this).removeAttr('style');
   }); 
   

演示: http://jsfiddle.net/GVjBn/19/

希望这就是您要找的。如果您还有其他问题，请告诉我!

编码愉快!