JQuery循环。mouseenter动画不会停止

我无法让一个动画停止在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);
});

---

您正在启动某个元素上的动画，但尝试停止该元素上的动画。请尝试直接呼叫stop：

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

---

您正在启动某个元素上的动画，但尝试停止该元素上的动画。请尝试直接呼叫stop：

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

---

我认为问题可能在于脉动法。对fadeTo的第二次呼叫将在第一次呼叫结束之前开始。我会将第二个调用作为回调事件，如下所示：

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

---

我认为问题可能在于脉动法。对fadeTo的第二次呼叫将在第一次呼叫结束之前开始。我会将第二个调用作为回调事件，如下所示：

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

---

解决了。不幸的是，上述解决方案不起作用。我通过以下方法解决了它。我需要整理一下，但解决办法如下。我将快速阅读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);
    }
});

---

解决了。不幸的是，上述解决方案不起作用。我通过以下方法解决了它。我需要整理一下，但解决办法如下。我将快速阅读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);
    }
});

---

恐怕没什么好运气。问题仍然存在。我感到惊讶的是，对于动画来说，一个循环应该是非常基本的东西，但事实证明它很难实现。核心JQuery似乎没有一个简单的解决方案。我担心这不会带来好运。问题仍然存在。我感到惊讶的是，对于动画来说，一个循环应该是非常基本的东西，但事实证明它很难实现。核心JQuery似乎没有一个简单的解决方案，恐怕也没有什么好运气。问题依然存在。恐怕这也没什么好运气。问题依然存在。