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