为什么这个鼠标悬停动画没有停止？

Question

我正在创建一个样例，其中有四个方块。当有人鼠标悬停在方块上时，它会向上滑动，显示其后面的内容；当鼠标离开时，它会向下滑动。这是我所做的：

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事件，但如何停止呢？

另外，请告诉我是否应该为此创建另一个问题，我想在span后面添加一些文本。我不擅长css，所以请帮我完成这个任务。

- Rakesh Juyal

---

我不明白你的第二个问题是什么。 - xandy

Answer 1

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

- xandy

Answer 2

你应该将 on hover 放在 Li 元素上，而不是 span 上。这样，即使 span 已经缩回，你的模式仍然停留在 Li 区域上。只要确保你的 Li 有足够的高度，在 span 缩小后留出鼠标悬停区域即可。

- Brian Scott