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