0

次のように動作するドロップダウンボックスがあります。

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').slideDown(1000);
     else
        $('#dropdown ul.children').slideUp(1000);

    //stop();?
});

ただし、マウスを外にすばやく移動すると、他のイベントが終了する前に別のイベントを実行できます。次の開始前に現在のイベントが終了することを確認するにはどうすればよいですか？

私が使用する場合.stop()、マウスオーバーしてマウスを前後に動かすことが可能であり、アニメーションを最初から再開するだけで、ぎくしゃくしたように見えますか？

4

2 に答える 2

3

これを試して：

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
        $('#dropdown ul.children').stop(true, true).slideDown(1000);
     else
        $('#dropdown ul.children').stop(true, true).slideUp(1000);

});

jQueryを参照してください.stop()

デモ

于 2012-07-13T21:50:37.340 に答える
0

ドロップダウンがアニメーション化されていることを示すフラグ クラスを設定する必要があります。このようなもの：

$(document).on("mouseenter mouseleave", "#dropdown", function(event){

    if (event.type == 'mouseenter')
    {
        $('#dropdown ul.children').addClass("animating");
        $('#dropdown ul.children').slideDown(1000);
        $('#dropdown ul.children').removeClass("animating");
    }
    else
    {
        if ($("#dropdown:not(.animating)")
        {
           $('#dropdown ul.children').slideUp(1000);
        }
         else
        {
           return false;
        }
    }
});

または、スライディングエッジのケースに対して確立したいルールに応じて、同様のもの。

于 2012-07-13T21:55:33.707 に答える