0

画面の右端から少し突き出たナビゲーションバーがあります。divにカーソルを合わせると、ブラウザの右側から550px左にスライドします。jqueryのアニメーション関数を使用していて、ホバーすると適切にアニメーション化できますが、ホバーを停止すると右にスライドできません。

私はjavascript/jqueryに非常に慣れていないので、単純なものが欠けているように感じます...

$(document).ready(function(){
$("#nav").hover(function() {
    $(this).animate({ 
    right: "0px",
    }, 800 );

    (function() {
    $(this).animate({ 
    right: "-550px",
  }, 800 );

});
});
});

そしてここに#navのcssがあります：

#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}
4

4 に答える 4

2

コードにいくつかの構文エラーがあります。コードは次のようになります：

$(document).ready(function(){
    $("#nav").hover(
        function() {
            $(this).animate({ right: "0px" }, 800 );
        },
        function() {
            $(this).animate({ right: "-550px" }, 800);
        }
    });
});

幸運を ！！

于 2012-10-14T05:01:38.123 に答える
1

ホバー関数を複雑にし、関数をラップし、関数()が実行されていません。 

$(document).ready(function() {
    $("#nav").hover(function() {
        $(this).animate({ right: "0px" }, 800);
    }, function() {
        $(this).animate({ right: "-550px" }, 800);
    });
});​
于 2012-10-14T05:02:05.473 に答える
0

アニメーションによく使用するオプションの1つは、そのアニメーションを含むcssクラスを作成してから.addClass()、アニメーションをトリガーするメソッドを作成することです。その高速で、ブラウザと互換性があります。これには純粋なcssを使用することもできます。

于 2012-10-14T05:05:40.963 に答える
0

あなたはこれを試すことができます...デモ

$(document).ready(function(){

    $("#nav").mouseover(function(){

        $(this).delay(200).animate({right: "0px"}, 800 ); 
        // Added a 200ms delay to prevent quick accidental mouse overs triggering animation.

    });

    $("#nav").mouseout(function(){

        $(this).clearQueue();
        // Gives the user the ability to cancel the animation by moving the mouse away

        $(this).animate({right: "-550px"}, 800 );

    });

});
于 2012-10-14T05:19:42.127 に答える