爲什麼這個動畫不停止？

我在創建一個樣本，其中我們將有四個塊，當有人將鼠標懸停在該塊上時，它將滑動以顯示其背後的內容，並且當發生鼠標懸停事件時它會滑落。這是我做過什麼：爲什麼這個動畫不停止？

$(".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

爲什麼這個動畫不停止？

回答

相關問題