Question

我有一个侧边菜单，我正在尝试动画。我希望它在页面加载时可见，然后滑动到左边距。在悬停时，我希望每个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>

Answer 1

您必须将<li>的{{1}}设置为position，或者使用relative。此外，最好使用margin-left和mouseenter，这样只有当鼠标指针位于所需元素上时才会触发事件（有关详细信息，请参阅mouseover()）。试试这个：

<强> HTML

mouseleave

<强> CSS

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

<强> JS

li {
    position: relative;
}

您可以对其进行测试here。

Answer 2

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'
        });
    });
});

jQuery nav .animate .hover - 为什么这不起作用？

2 个答案: