Why this onhover animation is not stopping?

Question

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.

Answer 1

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