Question

我正试图在鼠标悬停时淡出一些隐藏的div并暂停，但似乎正在发生的事情是div有点闪烁而不仅仅是淡入。

最初创建div时隐藏：

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

然后我有两个函数如下：

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);
});

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

Answer 1

我的猜测是你执行'实时'块

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

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

不止一次。

如果这样做，你会在DOM对象上添加许多mouseover，mouseout事件，因为jQuery不会替换实时绑定，而是堆叠它们。

因此，例如，如果您偶然运行您的实时块10次，那么每次鼠标悬停，您的实时（'鼠标悬停'）将被调用10次。

这可能看起来像闪烁： - ）

Answer 2

jQuery API：

mouseover / mouseout事件类型可能会因事件冒泡而导致许多麻烦。例如，当鼠标指针在此示例中移动到Inner元素上时，鼠标悬停事件将被发送到该元素，然后逐渐渗透到外部。这可以在不合适的时间触发我们的绑定鼠标悬停处理程序。有关有用的替代方案，请参阅.mouseenter()的讨论。

Answer 3

您可以尝试mouseenter/mouseleave代替mouseover/mouseout吗？

使用jquery淡入淡出隐藏的div

3 个答案: