0

我有一个从屏幕右边缘突出一点的导航栏。我想要它,所以当您将鼠标悬停在 div 上时,它会从浏览器的右侧向左滑动 550 像素。我正在使用 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

你可以试试这个......演示

$(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 回答
0

我们在动画中经常使用的一种选择是创建一个包含该动画的 css 类,然后.addClass()使用触发动画的方法。它速度快,并且兼容浏览器。您也可以为此使用纯 css。

于 2012-10-14T05:05:40.963 回答