[英]Animating a div when hovered
我有一个导航栏,它从屏幕的右边缘伸出一点。 我想要它,所以当您将鼠标悬停在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;
}
该代码有一些语法错误。 该代码应为:
$(document).ready(function(){
$("#nav").hover(
function() {
$(this).animate({ right: "0px" }, 800 );
},
function() {
$(this).animate({ right: "-550px" }, 800);
}
});
});
祝好运 !!
您使悬停函数变得复杂,用()
包裹了该函数,但未执行该函数。
$(document).ready(function() {
$("#nav").hover(function() {
$(this).animate({ right: "0px" }, 800);
}, function() {
$(this).animate({ right: "-550px" }, 800);
});
});
我们在动画中使用很多的一种方法是创建一个包含该动画的css类,然后使用.addClass()
方法触发该动画。 它的速度快,并且与浏览器兼容。 您也可以为此使用纯CSS。
你可以试试这个... 演示
$(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 );
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.