在盘旋时动画div

时间:2012-10-14 04:56:47

标签: javascript jquery html css

我有一个导航栏,从屏幕的右边缘伸出一点点。我想要它,所以当你将鼠标悬停在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 个答案:

答案 0 :(得分:2)

代码有一些语法错误。代码应该是:

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

祝你好运!!

答案 1 :(得分:1)

您的悬停功能很复杂,您已使用()包裹了该功能,并且您的功能未执行。

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

答案 2 :(得分:0)

我们对动画使用很多的一个选项是创建一个包含该动画的css类,然后使用.addClass()方法来触发动画。它速度快,与浏览器兼容。你也可以使用纯css。

答案 3 :(得分:0)

你可以试试这个...... Demo

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

    });

});