Why doesn't this onhover animation stop?

Question

I created a sample in which we will have four blocks, and when someone points a block at it, it will slide up to show the contents behind it, and when the mouseout event occurs, it will move down. This is what I did:

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>

The problem is that the animation does not want to stop. The reason is, when the block slides, it automatically fires the mouseout event, but how to stop it?

Also, let me know if I should create another question for him, I would like to have some text behind the gap. I am not good at css, so please help me with this.

Answer 1

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

Answer 2

Li, . , Li, . , , , .