如何在jQuery中将图标与文本一起悬停

Question

当我将鼠标悬停在菜单项上时，文本会弹出一个图标。当我将鼠标悬停在图标上时，它会移动到菜单顶部。

如何在文本弹出的同时将图标移到顶部？

HTML

~/.npmrc

的jQuery

    <div class="container">
    <ul id="menu">
        <li>
            <a href="#">
                <i class="icon_about"></i>
                <span class="title">About</span>
                <span class="description">Learn about us</span>
            </a>
        </li>
        <li>
            <a href="#">
                <i class="icon_work"></i>
                <span class="title">Work</span>
                <span class="description">See our work</span>
            </a>
        </li>
    </ul>
    </div>

Answer 1

我通过使用以下jQuery来解决这个问题：

      $("ul#menu a").hover(function() {
          $(this).stop().animate({
              bottom: '0px'
          }, 1000);
      },
      function() {
          $(this).stop().animate({
              bottom: '-65px'
          }, 1000);
      });

  $("ul#menu a").hover(function() {
          $(this).find("i").stop().animate({
              top: '0px'
          }, 500);
      },
      function() {
          $(this).find("i").stop().animate({
              top: '20px'
          }, 500);
      });