-1

メイン コンテンツを含む div コンテナーを含む Web ページがあり、その中にマウスをコンテナーに置くと表示される div があります。これは私が試したコードです:

var running=0;
                var running2=0;
                $('div.container').mouseenter(function() 
                {
                    if (running==0) 
                    {
                        running=1;
                        $('div.rightcontainer').css("margin-right",-350)
                        .animate({marginRight:0}, 750, function(){running=0;});
                    }
                }
                );



                $('div.container').mouseleave(function() {
                    if (running2==0) {
                    running2=1;
                    $('div.rightcontainer').css("margin-right",0)
                    .animate({marginRight:-350}, 750, function(){running2=0;});
                    }
                });

このコードは機能します：

$('div.container').mouseenter(function() {
                    console.log('trigger');
                    $("div.rightcontainer")
                    .css("visibility","visible")
                    .css("margin-right",-$("div.rightcontainer").width())
                    .animate({
                        marginRight:0
                    }, 1200); 
                });

                $('div.container').mouseleave(function() {
                    console.log('leave');
                    $("div.rightcontainer")
                    .css("visibility","visible")
                    .css("margin-right", "320") 
                    .animate({
                        marginRight:-350
                    }, 1200);
                });

しかし、問題は、マウスが複数回入ると、オブジェクトが入ったり出たりし続けることです。

編集：

.one() は一度だけ実行します。つまり、すべての開始と終了を積み重ねて、何度もアニメーションを実行するということです。

.stop() ソリューションの方が優れていましたが、アニメーションはどこからでも最後までジャンプしました。マウスがアニメーションの途中でコンテナを離れた場合、アニメーションがその場所で停止し、逆方向にアニメーション化する方法がある場合は?

これは、簡略化されたバージョンの Web サイトを含む JSFiddle です。コンテナは、ナビゲーションバーの下にあるものです。http://jsfiddle.net/yEzXp/

4

1 に答える 1

0

.stop() を使用する

$('div.container').mouseenter(function() {
    $("div.rightcontainer")
    .stop(true, true)
    .css("visibility","visible")
    .css("margin-right",-$("div.rightcontainer").width())
    .animate({
        marginRight:0
    }, 1200); 
});

$('div.container').mouseleave(function() {
    $("div.rightcontainer")
    .stop(true, true)
    .css("visibility","visible")
    .css("margin-right", "320") 
    .animate({
        marginRight:-350
    }, 1200);
});
于 2013-05-20T11:34:26.767 に答える