为什么这个悬停动画没有停止?

我正在创建一个示例,其中我们将有四个块,当有人鼠标悬停在块上时,它将向上滑动以显示其后面的内容,当鼠标悬停事件发生时,它将向下滑动。我就是这样做的:

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,请帮我做。