javascript - 简单的javascript动画

Question

我正在创建一个带有跟随鼠标的滑动条/框的导航。我设法为盒子设置动画我无法移动盒子以跟随鼠标。前任。如果鼠标在 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);
    });
 });

Answer 1

我不知道显示该代码的动画是什么。但是如果你想使用 margin left 动画那么你可以使用:

$(document).ready(function()
{
   $('#nav').hover(function()
   {
       $('#movers').animate({
               margin-left: '300px'
       });
   });
});

未测试但应该可以...