Question

我想这样做，当我将鼠标悬停在列表中的一个项目上时，它会移动该元素。这是我的列表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函数中的引号是什么？

Answer 1

使用on事件

$(document).ready(function () {

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

Answer 2

试试这个：

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

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

Answer 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

Answer 4

您可能需要考虑.on和事件地图方法。

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

Answer 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

动画列表中的内容

5 个答案: