2

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タイマーをクリアするための最良の方法は何ですか？

4

3 に答える 3

2

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

フィドル

于 2012-08-20T18:09:44.207 に答える
1

個人的には、これは、近接している多くの小さな要素に対するツールチップへの間違ったアプローチだと思います。

より良いアプローチは、.container全体にカーソルを合わせてから、各要素のコンテンツonmouseenterを変更することだと思います。

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

于 2012-08-20T18:18:38.670 に答える
0

簡単に実行します.stop()（詳細はここにあります）

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

これにより、以前のすべてのアニメーションが問題のオブジェクトで発生するのを防ぎます。

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

于 2012-08-20T18:11:10.580 に答える