为什么这个动画不停止？

我在创建一个样本，其中我们将有四个块，当有人将鼠标悬停在该块上时，它将滑动以显示其背后的内容，并且当发生鼠标悬停事件时它会滑落。这是我做过什么：为什么这个动画不停止？

$(".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，所以请帮助我做到这一点。

来源

2010-11-02 Rakesh Juyal

我不明白你的第二个问题是什么。 – xandy 2010-11-02 08:02:00

@xandy：我的坏！ – 2010-11-02 17:01:50

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

来源

2010-11-02 08:01:22 xandy

它工作:) – 2010-11-02 09:34:45

您应该将悬停在Li元素而不是跨度上。这样，即使跨度缩小，你的模式仍然在Li区域。只要确保你的李有一个高度，留下空间让鼠标有一个悬停区域后，跨度缩小。

来源

2010-11-02 08:00:48

为什么这个动画不停止？

回答

相关问题