懸停時對div進行動畫處理

Question

我有一個導航欄，它從屏幕的右邊緣伸出一點。 我想要它，所以當您將鼠標懸停在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;
}

Answer 1

該代碼有一些語法錯誤。 該代碼應為：

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

祝好運 ！！

Answer 2

您使懸停函數變得復雜，用()包裹了該函數，但未執行該函數。

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

Answer 3

我們在動畫中使用很多的一種方法是創建一個包含該動畫的css類，然后使用.addClass()方法觸發該動畫。 它的速度快，並且與瀏覽器兼容。 您也可以為此使用純CSS。

Answer 4

你可以試試這個... 演示

$(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 );

    });

});