Question

中的示例

$(".container.a1 div").hover(function(e){
    $(".popup").show(300).css({top: (e.pageY + 15) + "px",left: (e.pageX + 10) +"px"});
},function(){
    $(".popup").hide(300);    
});

当我移过div数组时，弹出窗口继续显示。

<div class="container a1">
   <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

使用 clearQueue 时，行为是随机的。

清除以前的jquery计时器的最佳方法是什么？

Answer 1

尝试使用stop()：

$(".container.a1 div, .container.a2 div").hover(
    function(e){
        $(".popup").stop(true,true)
                   .show(300)
                   .css({top: (e.pageY + 15) + "px",left: (e.pageX + 10) +"px"});
    },function(){
        $(".popup").stop(true,true)
                   .hide(300);    
    }
);

FIDDLE

我可能会做更像这样的事情（见评论）：

$(".container.a1, .container.a2").on({
    mouseenter: function(){
        $(".popup").show(300);
    },
    mouseleave: function() {
        $(".popup").hide(300);    
    },
    mousemove: function(e) {
        $(".popup").css({top: (e.pageY + 15) + "px",left: (e.pageX + 10) +"px"})
                   .text('hovering : '+$(e.target).index());
    }
});

FIDDLE

Answer 2

我个人认为，对于近距离的许多小元素来说，这是一种错误的工具提示方法。

我认为更好的方法是.hover整个.container，然后更改每个元素的onmouseenter上的内容。

http://jsfiddle.net/lathan/jDn7X/1/

Answer 3

快速.stop()（more information found here）

$(".popup").stop().hide(300);

这会阻止所有以前的动画在相关对象上发生。

http://jsfiddle.net/jDn7X/4/

jquery中的清除队列不适用于悬停时延迟显示隐藏

3 个答案: