javascript - 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

尝试使用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);    
    }
);

小提琴

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

$(".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 整个 .container 然后更改每个元素的内容 onmouseenter 。

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

Answer 3

做一个快速.stop()（更多信息在这里找到）

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

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

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