Dlaczego ta animacja nie jest zatrzymywana?

Question

Tworzyłem próbkę, w której będziemy mieć cztery bloki i kiedy ktoś najecha na blok, przesunie się w górę, aby pokazać zawartość za nim i kiedy pojawi się zdarzenie mouseout, zsunie się. To co zrobiłem:

http://jsbin.com/oluqu4

$(".garage span").hover(function(){ 
      $(this).animate({'height':'0px'},1000); 
      //$(this).clearQueue().animate({'height':'0px'},1500); 
       }, function() {     
      $(this).animate({'height':'100px'},1000); 
    //$(this).clearQueue().animate({'height':'100px'},1500); 
      }); 

HTML

<ul class="garage"> 
    <li id="shutter1"><span>1</span></li> 
    <li id="shutter2"><span>2</span></li> 
    <li id="shutter3"><span>3</span></li> 
    <li id="shutter4"><span>4</span></li>  
    </ul> 

Problem polega animacja nie chce przestać. Powodem jest to, że blok przesuwa się w górę automatycznie wystrzeliwuje wydarzenie mouseout, ale jak to zatrzymać?

Daj mi również znać, jeśli powinieneś napisać dla niego inne pytanie, chciałbym mieć tekst za zakresem. Nie jestem dobry w css, więc proszę, pomóż mi w tym.

Answer 1

$(".garage li").hover(function(){ 
    $("span", this).animate({'height':'0px'},1000); 
     }, function() {     
     $("span", this).animate({'height':'100px'},1000); 
    }); 

Answer 2

Powinieneś umieścić kursor na elemencie Li zamiast na przęsło. W ten sposób twój tryb pozostaje nad obszarem Li, nawet gdy odległość się zmniejszyła. po prostu upewnij się, że twój Li ma wysokość, która pozostawia miejsce na myszy, aby mieć obszar zawisu po zmniejszeniu się zakresu.