如何將圖標與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); 
     });