0

我有一个要制作动画的侧面菜单。我希望它在页面加载时可见，然后滑动到左边距。在悬停时，我希望每个 li 向右移动 150px，而不是在鼠标离开时返回 -150px。

我几乎可以肯定我的代码是正确的，但是……不。你能帮助我吗？

<script type="text/javascript">

$(document).ready(function() {
  $('#nav').animate( {left: "-110px"} );

//When mouse rolls over
  $('#nav li').hover(function() {
    $(this).stop().animate( {left: "150px"}, {queue: false, duration: 'slow'} );

  }, function() {
    $(this).stop().animate( {left: "-150px"}, {queue: false, duration: 'slow'} );  

    });


  }); // end of document ready

</script>
4

2 回答 2

0

您必须将<li>'s设置position为relative或使用margin-left. 此外，最好使用mouseenter并且mouseleave仅当鼠标指针位于所需元素上时才会触发事件（有关更多详细信息，请参见mouseover()）。尝试这个：

HTML

<ul id="nav">
     <li>Item1</li>
     <li>Item2</li>
</ul>

CSS

li {
    position: relative;
}

JS

$nav = $('#nav');
$nav.animate( {'left': "-110px"} );

//When mouse rolls over
$nav.find('li')
.on('mouseenter', function() {
    $(this).stop().animate( {'left': "150px"}, {queue: false, duration: 'slow'} );
})
.on('mouseleave', function() {
    $(this).stop().animate( {'left': "-150px"}, {queue: false, duration: 'slow'} );  
});

你可以在这里测试它。

于 2013-02-07T00:24:18.833 回答
0

http://jsfiddle.net/T5W2P/

您需要将位置设置为相对。

HTML：

<ul id="nav">
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
    <li>Link</li>
</ul>

CSS：

#nav, #nav li {
    position: relative;
}

jQuery：

$(document).ready(function () {
    $('#nav').animate({
        left: "-20px"
    });
    //When mouse rolls over
    $('#nav li').hover(function () {
        $(this).stop().animate({
            left: "20px"
        }, {
            queue: false,
            duration: 'slow'
        });
    }, function () {
        $(this).stop().animate({
            left: "0px"
        }, {
            queue: false,
            duration: 'slow'
        });
    });
});
于 2013-02-07T00:27:04.940 回答