淡入淡出隐藏的div与jquery

我试图淡化几个隐藏的divs在悬停和鼠标离开，但似乎发生的事情是，divs的闪烁而不是淡入淡出。淡入淡出隐藏的div与jquery

最初创建时的div隐藏：

$(container).find('.myDiv').hide();

然后我有2个功能如下：

function showDivs(container) { 
    $(container).find('.myDiv').fadeIn('slow'); 
} 

function hideDivs(bucketContainer) { 
    $(container).find('.myDiv').fadeOut(); 
}

而这一切放在一起如下：

$('.container').live('mouseover', function() { 
     showDivs(this); 
}); 

$('.container').live('mouseout', function() { 
     hideDivs(this); 
});

我该如何摆脱奇怪的闪烁效应？

来源

2011-03-30 newbie_86

给我们一个URL以查看您的页面正在运行吗？ – Codecraft 2011-03-30 12:10:40

我不能，全是本地的 – 2011-03-30 12:11:25

在jsfiddle上设置它？ – JohnP 2011-03-30 12:13:38

你可以试试mouseenter/mouseleave而不是mouseover/mouseout？

来源

2011-03-30 12:19:01

我的猜测是，你执行“活”块比一次

$('.container').live('mouseover', function() { 
     showDivs(this); 
}); 

$('.container').live('mouseout', function() { 
     hideDivs(this); 
});

更多。

如果你这样做，你会在你的DOM对象上添加很多mouseover，mouseout事件，因为jQuery并没有替换活动绑定，而是堆叠它们。因此，例如，如果您偶然运行您的活动块10次，那么对于每个鼠标悬停，您的实时（'mouseover'）...将被称为10次。

这可能看起来像闪烁:-)

来源

2011-03-30 12:44:19 ezmilhouse

感谢所有人，mouseenter和mouseleave似乎在做伎俩。 yup，mouseover和mouseout和live都有点棘手，闪烁消失了，谢谢！ – 2011-03-30 13:13:53

jQuery的API：

鼠标悬停/ mouseout事件的类型可能会由于事件冒泡很多头痛的问题。例如，在本例中，当鼠标指针移动到Inner元素上时，将发送一个mouseover事件给它，然后涓涓细流到Outer。这可能会在不合时宜的情况下触发我们的绑定鼠标悬停处理程序。请参阅.mouseenter()的讨论以获取有用的替代方案。

来源

2011-03-30 13:06:11 Corneliu

淡入淡出隐藏的div与jquery

回答

相关问题