Question

我遇到了JQuery show和hide的问题。当我将鼠标悬停在某个元素上时，我想在右侧弹出另一个元素。我用以下代码管理了它：

var actionHoverInListener = function () {
    $(this).children('.pop-out').show("slide", { direction:"left" }, 100);
};
var actionHoverOutListener = function () {
    $(this).children('.pop-out').hide("slide", { direction:"left" }, 100);
};

// Add a hover listener for actions
$(".magic").hover(
    actionHoverInListener, actionHoverOutListener
);

这很好，但问题是速度。如果我过快地将鼠标悬停在“魔法”div上，它永远不会隐藏弹出窗口。这就好像忽略了隐藏调用，因为该节目仍在为幻灯片设置动画。

正在正确调用hover out方法：我已经输入了日志代码以确保它被调用。所以，问题是隐藏不会取消节目。有没有办法做到这一点？

谢谢！

更新：

我在jfiddle中包含了一个问题的例子：http://jsfiddle.net/Pekf2/

将鼠标向下移动红色条纹。您将看到绿色滑出，但如果速度过快则不会向后滑动（即使使用stop（）调用）。

Answer 1

更改为

$(this).children('.pop-out').stop().hide(...

这将停止播放动画并立即隐藏。

编辑：不完全确定原因，但.stop与.children不相称。使用不同的选择器语法似乎使它无论出于何种原因都可以使用。

此外，由于动画暂停，left CSS可能会变为负数，因此我在.hide上添加了一个回调，以便在完成后将其设置为0。

http://jsfiddle.net/Pekf2/4/

Answer 2

您可以考虑使用jQuery hoverintent plugin - 它之前为我解决了这样的问题。

摆弄你的小提琴并实施hoverIntent让我想到了这一点：http://jsfiddle.net/crowjonah/Pekf2/1/

如果我这么说的话，效果很好。我只是更改了脚本以适应插件，如下所示：

var config = {    
 over: actionHoverInListener, // function = onMouseOver callback (REQUIRED)    
 timeout: 1000, // number = milliseconds delay before onMouseOut    
 out: actionHoverOutListener // function = onMouseOut callback (REQUIRED)

};

// Add a hover listener for actions
   $('.monkey').hoverIntent(
       config
);

JQuery隐藏显示优先级？

2 个答案: