JQuery：让hovered <li>移动

Question

我的网页上有一系列列表，我试图使用JQuery让这些列表项在悬停时略微移动到一边。这就是我到目前为止所做的工作，并不起作用：

HTML

<ul>
    <li><div>&nbsp;</div>Text1</li>
    <li><div>&nbsp;</div>Text2</li>
    <li><div>&nbsp;</div>Text3</li>
</ul>

JQuery的

$(document).ready(function() {
    $("li").hover(function() {
        $("div").animate({
            width: '+=10px'
        });
    }, function() {
        $("div").animate({
            width: '-=10px'
        });
    });
});

CSS

div {
      width : 0px;
    display : inline-block;
}

这是一个JSFiddle：https://jsfiddle.net/mjpcr9ov/

Answer 1

您的代码中存在错误，并且还会获得div inside the li by passing it's context

＆＃13;

＆＃13;

$(document).ready(function() {
  $("li").hover(function() {
    $("div", this)
      .stop() // use stop for strop the previous animation
      .animate({
        width: '+=10px'
      });
  }, function() {
    //        -^----- remove `)` from here
    $("div", this)
      .stop() // use stop for strop the previous animation
      .animate({
        width: '-=10px'
      });
  });
});

＆＃13;

div {
  width: 0px;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div>&nbsp;</div>Text1</li>
  <li>
    <div>&nbsp;</div>Text2</li>
  <li>
    <div>&nbsp;</div>Text3</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

<小时/> 更新：使用

中的嵌套范围进行演示

＆＃13;

＆＃13;

$(document).ready(function() {
  $("li span").hover(function() {
    $(this)
      .prev()
      // or
      // .parent() // get parent li
      // .find("div") // find div inside    
      .stop() // use stop for strop the previous animation
      .animate({
        width: '+=10px'
      });
  }, function() {
    $(this)
      .prev()
      // or
      // .parent() // get parent li
      // .find("div") // find div inside    
      .stop() // use stop for strop the previous animation
      .animate({
        width: '-=10px'
      });
  });
});

＆＃13;

div {
  width: 0px;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>
    <div>&nbsp;</div><span>Text1</span>
  </li>
  <li>
    <div>&nbsp;</div><span>Text2</span>
  </li>
  <li>
    <div>&nbsp;</div><span>Text3</span>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;