Почему эта анимация onhover не останавливается?

Question

Я создавал образец, в котором у нас будет четыре блока, и когда кто-то наведет на него блок, он будет скользить вверх, чтобы показать содержимое позади него, и когда произойдет событие mouseout, оно сдвинется вниз. Это то, что я сделал:

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> 

Проблема заключается в анимации не желает останавливаться. Причина в том, когда блок сместился, он автоматически запускает событие mouseout, но как его остановить?

Кроме того, дайте мне знать, если я должен создать для него еще один вопрос, я хотел бы получить текст за пролетом. Я плохо разбираюсь в css, поэтому, пожалуйста, помогите мне в этом.

Answer 1

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

Answer 2

Вы должны поместить курсор на элементе Li, а не в промежутке. Таким образом, ваш режим остается над областью Li, даже когда отступ отпадает. просто убедитесь, что ваш Ли имеет высоту, которая оставляет место для мыши, чтобы иметь область зависания после сокращения диапазона.