jQuery «анимация» нескольких divs inisde div

Question

Итак, у меня есть контейнер и внутри есть библиотека yui с 5 div. Это divs - меню. Итак, что я хочу сделать, так это то, что когда я перемещаю мышь над div, только этот будет анимировать UP, и когда я буду перемещать мышь в другое место, он будет анимировать DOWN. Мой код js анимирует все элементы одновременно.

<div class="container"> 
<div class='yui3-g-r'> 

    <div class="yui3-u-1-5"> 
     <div class="kvadrat"> 
      <span class="title"><a>Smeri</a></span><br/> 
      <span class="description"> 
       <ul class="blabla"> 
       <li><a class="link" href="smeri/racunalnistvo_prva/index.html" >Računalništvo</a></li> 
       <li><a class="link">Strojništvo</a></li> 
       </ul> 
      </span> 
     </div> 
    </div> 

    <div class="yui3-u-1-5"> 
     <div class="kvadrat"> 
      <span class="title"><a>Galerija</a></span><br/> 
      <span class="description"> 
       <ul class="blabla"> 
        <li><a class="link" href="galerija/predstavitev poklicev-nak. center/osnova/index.html">Slike</a></li> 
       </ul> 
      </span> 
     </div> 
    </div> 

И мой Jquery код заключается в следующем:

$(".description").hide(); 

$('div.kvadrat').hover(
    function() { 
     $(".description").slideDown("slow"); 
    }, 
    function() { 
     $(".description").slideUp("slow"); 
    } 
); 

Answer 1

$(".description").hide(); 

$('div.kvadrat').hover(
    function() { 
     $(this).find(".description").slideDown("slow"); 
    }, 
    function() { 
     $(this).find(".description").slideUp("slow"); 
    } 
);