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

Я создавал образец, в котором у нас будет четыре блока, и когда кто-то наведет курсор на блок, он будет скользить вверх, чтобы показать содержимое позади него, а когда произойдет событие 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

 

    
1
    
2
    
3
    
4
    
  

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

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