Why this onhover animation is not stopping?

I was creating a sample wherein we will be having four blocks and when someone mouseover the block it will slide up to show the content 开发者_如何学编程behind it and when the mouseout event occur it will slide 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 animation is not willing to stop. The reason is when the block slides up it automatically fire the mouseout event but how to stop that?

Also, let me know if i should create another question for it, i would like to have some text behind the span. I am not good in css so please help me in doing that.

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

You should place the on hover on the Li element rather than the span. That way your mode remains over the Li area even when the span has retreated. just make sure your Li has a height that leaves room for the mouse to have a hover area after the span shrinks.