Question

我有以下代码来显示悬停元素的绝对定位（分层为z-index）元素。当鼠标干扰悬停时淡入的元素并导致鼠标悬停/鼠标悬停反复触发导致不良影响。

对此进行编码的最佳方法是什么，因此淡入元素不会干扰悬停事件？

$("div-below-faded-in-element").hover(function(e) {
    $("hovered-element-positioned-on-top-of-div").fadeIn()
},
function() {
    $("hovered-element-positioned-on-top-of-div").fadeOut()
})

提前致谢，对不起，如果这令人困惑，有点难以解释。

jsFiddle示例： http://jsfiddle.net/AWm66/

Answer 1

编辑：看看我制作的这个jsFiddle。我刚为btm和top添加了一个包装器，并为它添加了事件处理程序。

<强> jsFiddle sample

Answer 2

通过将属性$.fx.off设置为true，可以全局停止动画。完成此操作后，所有动画方法都会在调用时立即将元素设置为最终状态，而不是显示效果。

在元素上调用.stop（）时，会立即停止当前运行的动画（如果有）。例如，如果在调用.stop（）时使用.slideUp（）隐藏元素，则现在仍将显示该元素，但该元素将是其先前高度的一小部分。不调用回调函数。

如果在同一元素上调用多个动画方法，则后面的动画将放置在元素的效果队列中。这些动画直到第一个动画完成才会开始。调用.stop（）时，队列中的下一个动画立即开始。如果clearQueue参数的值为true，则队列中的其余动画将被删除

Answer 3

我不知道为什么，但是我一直在注意到一些我一直在努力的悬停效果

然而，对于你的用例，fadeTo()会这样做 - 我尝试了它似乎工作得更好，它动画了元素的不透明度

$("#above").hover(function () {
    $(this).fadeTo("slow", 0.0)
},
function(){
     $(this).fadeTo("slow", 1.0)
});

使用jQuery .hover（）与absoltutely定位分层元素

3 个答案:

示例：HERE