0

我在使用 JQuery 显示和隐藏时遇到问题。当我将鼠标悬停在一个元素上时，我想显示另一个元素弹出到右侧。我已经使用以下代码进行了管理：

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 上的速度太快，它永远不会隐藏弹出窗口。就好像隐藏调用被忽略了，因为该节目仍在为幻灯片制作动画。

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

谢谢！

更新：

我在 jfiddle 上包含了我的问题示例：http: //jsfiddle.net/Pekf2/

沿着红色条纹运行鼠标。您将看到绿色滑出，但如果您太快（即使使用 stop() 调用）也不会滑回。

4

2 回答 2

2

改成

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

这将停止显示动画并立即隐藏。

编辑：不完全确定为什么，但.stop不喜欢那样玩.children。无论出于何种原因，使用不同的选择器语法似乎都可以使其工作。

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

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

于 2012-11-26T22:54:21.210 回答
0

你可以考虑使用jQuery hoverintent 插件——它以前为我解决过这样的问题。

摆弄你的小提琴并实施 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
);
于 2012-11-26T22:55:21.863 回答