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

Question

最好的方法是查看http://jsfiddle.net/jDn7X/中的示例

$(".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

尝试使用停()：

$(".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);    
    }
);

小提琴

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

$(".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());
    }
});
​

小提琴

Answer 2

我个人认为，这是错误的方法，以一个工具提示，在许多小型项目经理在附近。

我认为更好的方法是对整个.hover进行.hover，然后更改每个元素的内容。

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

Answer 3

做一个快速.stop() (这里有更多的信息)

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

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

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