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

Question

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

我如何才能使图标在文本弹出的同时移动到顶部？

HTML

    <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>

jQuery

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

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

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