JQuery循环.mouseenter动画不会停止

时间:2011-05-11 19:27:14

标签: jquery animation

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

3 个答案:

答案 0 :(得分: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);
});

答案 1 :(得分:0)

我认为问题可能出在脉动方法中。第二次调用fadeTo将在第一次调用结束之前启动。我会把第二个调用作为回调事件,如下所示:

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

答案 2 :(得分:0)

解决。不幸的是,上述解决方案不起作用。我按照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);
    }
});