[英]Animating a div when hovered
I have a navigation bar that sticks out a little bit from the right edge of the screen. 我有一个导航栏,它从屏幕的右边缘伸出一点。 I want it so when you hover on the div, it slides left 550px out of the right side of the browser. 我想要它,所以当您将鼠标悬停在div上时,它会向左滑动550px,离开浏览器的右侧。 I'm using jquery's animate function and I got it to animate properly when hovered, but I can't get it to slide back to the right when you stop hovering on it. 我正在使用jquery的动画功能,将其悬停时可以使动画正确播放,但是当您停止将其悬停时,它无法向右滑动。
I'm very new to javascript/jquery and I feel like I'm missing something simple... 我是javascript / jquery的新手,感觉好像缺少了一些简单的东西...
$(document).ready(function(){
$("#nav").hover(function() {
$(this).animate({
right: "0px",
}, 800 );
(function() {
$(this).animate({
right: "-550px",
}, 800 );
});
});
});
And here's #nav's css: 这是#nav的CSS:
#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}
The code has some syntax errors. 该代码有一些语法错误。 The code should be : 该代码应为:
$(document).ready(function(){
$("#nav").hover(
function() {
$(this).animate({ right: "0px" }, 800 );
},
function() {
$(this).animate({ right: "-550px" }, 800);
}
});
});
Good Luck !! 祝好运 !!
You have made your hover function complicated, you have wrapped the function with ()
and your function is not executed. 您使悬停函数变得复杂,用()
包裹了该函数,但未执行该函数。
$(document).ready(function() {
$("#nav").hover(function() {
$(this).animate({ right: "0px" }, 800);
}, function() {
$(this).animate({ right: "-550px" }, 800);
});
});
One option, which we use a lot for our animation, is to make a css class that contains that animation, and then ise the .addClass()
method to trigger the animation. 我们在动画中使用很多的一种方法是创建一个包含该动画的css类,然后使用.addClass()
方法触发该动画。 Its fast, and its browser compatible. 它的速度快,并且与浏览器兼容。 You could also use pure css for this. 您也可以为此使用纯CSS。
You could try this... 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 );
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.