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

【问题标题】：jQuery nav .animate .hover --why wont this work?jQuery nav .animate .hover -- 为什么这不起作用？
【发布时间】：2013-02-06 23:43:57
【问题描述】：

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

【问题讨论】：

尝试将left: "150px" 更改为left: "+=150px"。
您也可以发布您的 html 吗？
不确定如何添加我的 html。它告诉我它的格式不正确......
左：“+=150px”没有用。

标签： jquery jquery-animate jquery-hover

【解决方案1】：

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

HTML

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

CSS

li {
    position: relative;
}

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

你可以测试一下here。

【讨论】：

.hover() 几乎可以为您处理鼠标进入和离开。
谢谢！我之前用 mouseenter 和 mouseleave 尝试过，但无法正常工作。绝对是李的位置让我绊倒。非常感谢！
@jimjimmy1995 是的，你是对的。那是我不习惯使用快捷方式。通常我更喜欢使用on()/off() 方法。 @user2033669 不客气。

【解决方案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'
        });
    });
});

【讨论】：