3

每当您将鼠标悬停在它上面时，我div都会运行一个小动画：

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

问题是它.cg-panel位于另一个div根据需要显示和隐藏的顶部：

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

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

我怎样才能避免触发第一个事件？

小提琴示例——在 chrome 中尝试。由于某种原因它锁定了Firefox，不知道为什么。

显示后我也无法绑定事件

4

2 回答 2

2

如果没有你的 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);
});

编辑：

我对您的演示进行了一些调整，然后想出了这个可能的解决方案。

于 2012-09-08T19:42:21.543 回答
0

“控制网格”显示在 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);
    }
});

这只有效，因为我的网格覆盖了整个屏幕，所以当它出现时，您的鼠标不可能不在面板之一上方。（除非我可能添加键盘事件......这是一个计划......但是，我没有更好的解决方案）

于 2012-09-08T21:41:00.547 回答