0

親 div 内に div があり、通常は非表示になっています。親 div にカーソルを合わせると、子が表示されます。この効果を得るために JQuery .toggle() を使用しています。問題は、MouseIn と MouseOut が非常に高速で、親上で繰り返し実行されると、子 div が何度も切り替えられることです。これを防ぐ方法はありますか? ページの速度が低下していますか?

JSFIDDLE: http://jsfiddle.net/vY59g/1/

私のJQuery：

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").toggle("slow");
    });
});
4

3 に答える 3

1

これは、アニメーションのキューイングの性質により、すべてのマウスの入力およびマウスの離脱操作がトグル操作のキューに入れられるためです。そのため、Enter イベントと Leave イベントをトリガーするマウスの素早い動きがある場合、イベントが終了した後でもアニメーションが発生し続けます。

解決策は、 .stop()を使用してトグルが呼び出される前に、以前のアニメーションを停止してクリアすることです。

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").stop(true, true).toggle("slow");
    });
});

デモ:フィドル

于 2013-11-13T02:39:28.270 に答える
1

より良いものにしたい場合は、div:.result-user-facts を変数に入れます (変数が 1 つしかない場合)。このような：

$(function (){
    var container = $(".result");
    var item = container.find(".result-user-facts").eq(0);
    $(".result").hover(function (){
        item.stop().toggle("slow");
    });
});
于 2013-11-13T06:18:19.017 に答える
0

.stop(true,true)を使用

一致した要素で現在実行中のアニメーションを停止します。

フィドルのデモ

$(document).ready(function() {
    $(".result").hover(function() {
        $(this).find(".result-user-facts").stop(true,true).toggle("slow");
    });
});
于 2013-11-13T02:39:07.983 に答える