jQuery无限循环
jQuery无限循环
提问于 2012-02-16 03:25:51
我想让一个函数在mouseenter上执行一次，然后在mouseleave上，我想让元素返回到它的状态。
我的代码产生了一个无限循环。鼠标进入，元素无限翻转，直到我的鼠标离开。
$(document).ready(function() {
var flipfunc = function() {
var elem = $(this);
if (!elem.data('flipped')) {
elem.flip({
direction: 'lr',
speed: 250,
onBefore: function() {
elem.html(elem.siblings('.sponsorData').html());
}
});
elem.data('flipped', true);
elem.addClass('sponsorFlipped');
//elem.unbind('mouseenter', flipfunc);
}
else {
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false)
//elem.unbind('mouseleave', rflipfunc);
}
}
$('.sponsorFlip').bind('mouseenter', flipfunc);
//$('.sponsorFlipped').bind('mouseleave', rflipfunc);
});我已经尝试了许多解决方案，但我不知道问题出在哪里…
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-02-16 03:54:41
mouseenter事件是在鼠标翻转时触发的，因此您必须检测鼠标是否移出。这是实现这一点的一种方法。
$(window).bind('mousemove', function(e){
if($(e.target).hasClass("sponsorFlip")){
mouseMovedOut = false;
}else{
mouseMovedOut = true;
}
});请看这里的演示(仅在FF中测试)：http://jsfiddle.net/tgg33/7/
现在，仅当鼠标进入时，div才会翻转。如果你想在鼠标离开时翻转回来，你必须添加mouseleave处理程序。
Stack Overflow用户
发布于 2012-02-16 06:05:29
我现在知道问题是什么了，我也知道为什么这对您来说很难诊断。翻转动画以某种方式干扰了悬停事件，从而导致它陷入无限循环。
我将动画元素放在一个容器中--我认为监控外部元素的悬停事件就可以解决这个问题。我非常惊讶地发现它没有，当内部元素被激活时，它会触发一个mouseout事件，这会导致你的无限循环。我通过在sponserFlip目录中添加css属性pointer-events: none解决了这个问题。IE不支持这一点，但也有解决办法。如果你想走这条路，请告诉我。
http://jsfiddle.net/SF2MD/
$('.container').hover(function() {
console.log('hover');
$(this).children('.sponsorFlip').flip({
direction: 'lr',
speed: 250
});
}, function() {
$(this).children('.sponsorFlip').flip({
direction: 'lr',
speed: 250
});
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9299888
复制相关文章
相似问题
腾讯云开发者
