我正在创建一个带有跟随鼠标的滑动条/框的导航。我设法为盒子设置动画我无法移动盒子以跟随鼠标。前任。如果鼠标在 nav1 中,则该框将从当前放置 nav 的任何位置滑动到 nav1。
我做了一个例子 jsfiddle: http://jsfiddle.net/5Wrcr/
HTML
<div id="nav" style="margin: 0 auto; width: 500px; background: red;">
<div id="nav1"></div>
<div id="nav2"></div>
<div id="nav3"></div>
<div id="nav4"></div>
<div id="movers"></div>
</div>
CSS
#nav1, #nav2, #nav3, #nav4 {
width: 98px;
height: 48px;
border: thin solid black;
float: left;
}
#movers {
width: 100px;
height: 50px;
background: blue;
display: none;
position: absolute;
opacity: 0.3;
}
#nav:hover > #movers {
display: block;
}
JS
$(document).ready(function(){
$("#nav").hover(function(){
$('#movers').stop().animate({'margin-left': '300px'}, 500);
});
});
最佳答案
我不知道显示该代码的动画是什么。但是如果你想使用 margin left 动画那么你可以使用:
$(document).ready(function()
{
$('#nav').hover(function()
{
$('#movers').animate({
margin-left: '300px'
});
});
});
未测试但应该可以...
关于javascript - 简单的javascript动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23333926/