Question

我有这个div，只要你把它放在它上面就会运行一点动画：

$('.cg-panel').bind('mouseover.anim', function() {
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
});

问题在于.cg-panel位于另一个div的顶部，并在需要时显示和隐藏：

$('#control_grid').show();

当显示“控制网格”时，鼠标悬停事件立即触发。只有当你的鼠标从侧面进入鼠标时，如果鼠标已经超过它，我不希望它发射。

如何避免触发第一个事件？

example fiddle - 尝试镀铬。它出于某种原因锁定了Firefox，不知道为什么。

I can't bind the event after it's shown either

Answer 1

如果没有你的HTML以及对你想要的更好的描述，很难测试这个理论;但是，由于您只想在拳头进入div时发生事件，您是否有理由不想使用mouseenter代替mouseover？

$('.cg-panel').bind('mouseenter.anim', function() {
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
});

另外，请注意，根据您使用的jquery版本，bind()已弃用，已被on()取代。

$('.cg-panel').on('mouseenter.anim', function() {
    $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
});

修改：

我稍微调了一下你的演示，然后我想出了this possible solution。

Answer 2

“控制网格”显示在onclick事件中。如果我同时设置变量，

$cg.show().data('flash', false);

然后我可以用它来防止第一次“闪光”：

$('.cg-panel').on('mouseenter.anim', function() {
    if($cg.data('flash')) {
        $(this).stop(true).css({ 'opacity': 0.4 }).transition({ 'opacity': 0 }, 800);
    } else {
        $cg.data('flash', true);
    }
});

这只能起作用，因为我的网格覆盖了整个屏幕，因此当鼠标出现时，鼠标不可能不会覆盖其中一个面板。（除非我添加键盘事件.....这是一个计划......但是，我没有更好的解决方案）

如果游标已在元素内部，请避免触发鼠标悬停事件？

2 个答案: