Question

我有鼠标悬停和鼠标移动，我在鼠标悬停中隐藏/显示一些div，然后在鼠标移开时反转隐藏/显示。它可以工作，但是如果我快速移动我的鼠标在Div上我将鼠标移动以显示div，它会来回移动约3次，显示并隐藏。我错过了什么？

$("TABLE.tbl-graphs DIV.util").mouseover(
    function(){
        $("DIV.pic-container, DIV.util-info").hide("slow");
        $("DIV.util-description").show("slow");
    });
$("TABLE.tbl-graphs DIV.util").mouseout(
    function(){
        $("DIV.pic-container, DIV.util-info").show("slow");
        $("DIV.util-description").hide("slow");
    });

Answer 1

在致电.show()或.hide()之前使用.stop()。您可能还想使用mouseenter和mouseleave - 区别在于事件冒泡。

尝试使用此尺寸：

var $divs = $("div.pic-container, div.util-info, div.util-description");

$("table.tbl-graphs div.util").live('mouseenter mouseleave'
function() {
    $divs.stop().toggle("slow");
});

请注意，显示/隐藏的<div>需要处于正确的初始状态才能生效。

Answer 2

我认为你正在寻找dequeue：http://api.jquery.com/dequeue/

这不允许排队的事件（例如，将鼠标悬停在div上并让它淡入淡出三次，只有一次）

Answer 3

解决此问题的一种常见方法是使用简单的标志，因此如果它正在执行某些操作，则会忽略鼠标请求，例如

if(flag) return;
flag = true

然后为你的函数添加一个flag = false的回调

Answer 4

尝试使用.stop（true，true）来阻止动画排队。 http://api.jquery.com/stop/

您可能还想查看.hover（handlerIn，handlerOut）。 http://api.jquery.com/hover/#hover1

mouseover / mouseout jquery

4 个答案: