动画列表中的内容答案

【问题标题】：Animate content in a list动画列表中的内容
【发布时间】：2014-02-27 13:28:14
【问题描述】：

我想这样当我将鼠标悬停在列表中的一个项目上时，它会移动该元素。这是我的列表的 HTML 代码：

<ul class="nav">
  <li class="test"><a href="http://choughsttc.com/">Home</a></li>
  <li><a href="http://choughsttc.com/">News</a></li>
  <li><a href="http://choughsttc.com/">About us</a></li>
  <li><a href="http://choughsttc.com/">Venue</a></li>
  <li><a href="http://choughsttc.com/">Affiliations</a></li>
  <li><a href="http://choughsttc.com/">Players & Officers</a></li>
  <li><a href="http://choughsttc.com/">Fixtures & Results</a></li>
  <li><a href="http://choughsttc.com/">Coaching</a></li>
  <li><a href="http://choughsttc.com/">Contact us</a></li>
</ul>

这是我的 Jquery 代码：

    $(document).ready(function() {
      $('').mouseenter(function() {
        $(this).animate({ left: '+=100px' });
      });

      $('').mouseleave(function() {
        $(this).animate({ left: '-=100px' });
      });
    });

基本上，我的问题是 JQuery 函数中的引号是什么？

【问题讨论】：

呃，.nav li 怎么样？
我忘了说，

标签： javascript jquery html list

【解决方案1】：

使用on 事件

$(document).ready(function () {

    $('.nav').on({
         mouseenter : function(){
            $(this).animate({left: '+=100px'});
         },
        mouseleave : function(){
            $(this).animate({left: '-=100px'});
         }
     }, 'li');
 });

【讨论】：

【解决方案2】：

试试这个：

$(document).ready(function() 
    {
    $('.nav li').mouseenter(function()
    {
        $(this).animate({left: '+=100px'});
    });

    $('.nav li').mouseleave(function()
    {
        $(this).animate({left: '-=100px'});
    });
});

【讨论】：

【解决方案3】：

您可以使用$('.nav li') 来定位您的nav 的列表项：

$(document).ready(function () {
    $('.nav li').mouseenter(function () {
        $(this).animate({
            left: '+=100px'
        });
    });

    $('.nav li').mouseleave(function () {
        $(this).animate({
            left: '-=100px'
        });
    });
});

另外，您需要为列表项设置position: relative，这样left 值才能起作用：

.nav li {
    position: relative;
}

Fiddle Demo

【讨论】：

【解决方案4】：

您可能需要考虑.on 和事件映射方法。

$('.nav').on({
  mouseenter : function(){
    $(this).animate({left: '+=100px'});
  },
  mouseleave : function(){
    $(this).animate({left: '-=100px'});
  }
}, 'li');

【讨论】：

【解决方案5】：

HTML 代码：

<ul class="nav">
    <li><a href="http://choughsttc.com/">Home</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">About us</a></li>
    <li><a href="#">Venue</a></li>
    <li><a href="#">Affiliations</a></li>
    <li><a href="#">Players & Officers</a></li>
    <li><a href="#">Fixtures & Results</a></li>
    <li><a href="#">Coaching</a></li>
    <li><a href="#">Contact us</a></li>
</ul>

Javascript：

$(document).ready(function () {
    $('.nav li').mouseenter(function () {
        $(this).animate({
            left: '+=100px'
        });
    });

    $('.nav li').mouseleave(function () {
        $(this).animate({
             left: '-=100px'
        });
    });
});

一点 CSS tweek 让列表悬停动画工作：

.nav {
   padding: 20px 0 0 20px;
}
.nav li {
   position: relative;
}

查看演示：DEMO

【讨论】：