使用 jquery 淡入淡出隐藏的 div

发布于 2024-10-28 05:07:24 字数 583 浏览 4 评论 0原文

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

最初创建时，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);
});

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

原文

i'm trying to fade a few hidden divs in on hover and out on mouse leave, but what seems to be happening is that the divs sort of flicker instead of just fading in.

initially when created the divs are hidden:

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

then i have 2 functions as follows:

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

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

and this all put together as follows:

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

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

How do i get rid of the odd flicker effect?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

七七 2024-11-04 05:07:24

我的猜测是您

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

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

多次执行“实时”块。

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

例如，如果您不小心运行了活动块 10 次，那么每次鼠标悬停时，您的 live('mouseover') ... 将被调用 10 次。

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

my guess is that you execute the 'live' blocks

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

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

more than one time.

If you do so you add up many mouseover, mouseout events on your DOM objects because jQuery is not replacing the live binds but stacking them.

So for example if you by accident run your live blocks 10 times, then with every mouseover, your live('mouseover') ... will be called 10 times.

That might look like flickering :-)

回复收藏 0 原文

淡淡绿茶香 2024-11-04 05:07:24

jQuery API：

mouseover/mouseout 事件类型可能会因事件冒泡而导致许多令人头痛的问题。例如，当鼠标指针移到本例中的 Inner 元素上时，将向该元素发送 mouseover 事件，然后向上滴到 Outer 元素。这可能会在不适当的时候触发我们绑定的鼠标悬停处理程序。请参阅 .mouseenter() 的讨论以获得有用的替代方案。

回复收藏 0 原文