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