JQuery循环.mouseenter动画不会停止

Question

我无法在jQuery .mouseleave上停止播放动画，有时动画会停止，有时甚至不会停止，一旦停止动画就无法停止，并且不会响应.mouseleave事件。所有其他动画都很好，这是唯一一个带有循环的动画，显然在某个地方是错误的。

这些ID是动态分配的（Wordpress帖子），所以我使用.parents('.someClassName:first')来引用对象层次结构，然后使用.find('findThisClass')来引用对象层次结构。

任何人都可以看到它为什么不工作？或者有更好的建议如何去做。我的代码是...

// Call this function from below 
function pulsate(myObject) { 
    myObject 
    .parents('.index-post:first') // Find closest parent 
    .find('div.play-arrow') // Find child div to animate 
    .css({ 
     visibility: "visible", 
     opacity:0 
    }) 
    .fadeTo(500, 1) 
    .fadeTo(500, 0, function(){ 
      pulsate(myObject); // Loop the animation 
     } 
    ); 
} 

jQuery("#index div.index-post") // The nearest parent with an ID 
.find("a") // Find the link 
.mouseenter(function(){ 
    var $self=jQuery(this); 
    pulsate($self); // Call function defined above 
}) 
.mouseleave(function(){ 
    jQuery(this) 
    .parents('.index-post:first') // Find closest parent 
    .find('div.play-arrow') // Find child div to animate 
    .stop() 
    .fadeTo(500, 0); 
}); 

Answer 1

解决。不幸的是，上述解决方案不起作用。我通过遵循this post来解决它。我需要整理它，但解决方案如下。我要快速阅读jQuery .live，因为它似乎有答案为什么没有其他的工作。

// Play button animation 
var timerID; 
jQuery("#index div.index-post") 
.find("a") 
.live('mouseover mouseout', function(event) { 
    var self = jQuery(this); 
    if (event.type == 'mouseover') { 
     self 
     .parents('.index-post:first') 
     .find('div.play-arrow') 
     .css({ 
      visibility: "visible", 
      opacity:0 
     }) 
     .fadeTo(500, 1) 
     .fadeTo(500, 0); 
     timerID = setInterval(function() { 
      self 
      .parents('.index-post:first') 
      .find('div.play-arrow') 
      .fadeTo(500, 1) 
      .fadeTo(500, 0); 
     }, 1000); 
    } 
    else { 
     self 
     .parents('.index-post:first') 
     .find('div.play-arrow') 
     .stop(true, true) 
     .fadeTo(500, 0); 
     clearInterval(timerID); 
    } 
}); 

Answer 2

您正在启动元素上的动画，但您尝试停止元素上的动画。尝试直接呼叫停止代替：

.mouseleave(function(){ 
    jQuery(this) 
    .stop() 
    .parents('.index-post:first') // Find closest parent 
    .find('div.play-arrow') // Find child div to animate 
    .fadeTo(500, 0); 
}); 

Answer 3

我认为问题可能是在脉动方法。第二次调用fadeTo将在第一次通话结束之前开始。我会把第二个电话作为这样的回调事件：

.fadeTo(500, 1, 
.fadeTo(500, 0, function(){ 
     pulsate(myObject); // Loop the animation 
    } 
));