jQuery的stop（）似乎阻止了尚未排隊的動畫

Question

jQuery的stop()實際上是如何工作的？

如果你看起來here (http://jsfiddle.net/hWTT6/)，當你將鼠標懸停在主藍色框上時，它應該變成紅色，當你將鼠標懸停時，它應該消失。問題在於，即使在第一次淡入淡出完成之前鼠標懸停，紅色也會完全消失（然後回到藍色）。滑動效果可以更清楚地看出問題。將鼠標懸停在幻燈片「按鈕」上，主框將滑動到藍色，懸停，然後滑回。但是，在第一個動畫完成之前，請嘗試徘徊，關閉和打開和關閉。你會看到所有四個動畫都被執行了。我在這裏列舉了兩個例子，表明它不僅僅是一個效果或某個問題。

我認爲這將很容易通過在動畫之前添加stop來解決，如代碼中所示。但是，如果我這樣做，當前的動畫將停止，並且下一個動畫將永遠不會啓動。幾乎好像stop正在阻止後發生的動畫致電stop。

我在這裏錯過了什麼？

謝謝。

Answer 1

您錯過了.stop()接受兩個參數。這兩個布爾值，表明：

- clearQueue (first) 
- jumpToEnd (second) 

那麼通過調用$('#foo').stop(true, true).doSomeOtherStuff()你應該得到你想要的目標。

參考：.stop()

Answer 2

你可以設置止損（）選項（真正的，真實的），這樣就取消提示所有事件和跳轉到上一個動畫結束。看看小提琴：HTTP：//jsfiddle.net/hWTT6/4/

Answer 3

stop方法可以稱得上是以下區別方法：

.stop(true); 
//Same as: 
.stop(true, false); //Empty the animation queue only 


//Or 
.stop(true,true); // Empties the animation queue AND jumps to the end 


//Default 
.stop() 

//Same as 

.stop(false,false); 

有可能是使用.animate而不是一種更好的方式：Demo Here

$(function() { 
    $('#fade') 
    .mouseenter(function() { 
     $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '0'}, 'slow'); 
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().css('height', '10em').animate({'opacity' : '1'}, 'slow'); 
    }); 


    $('#slide_fire') 
    .mouseenter(function() { 
     $('#fg_fade').stop().css('opacity', '1').animate({'height' : '0'}, 'slow');  
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().css('opacity', '1').animate({'height' : '10em'}, 'slow'); 
    }); 

}); 

這樣動畫在你想要的時候停下來，仍然運行下一個動畫。

.stop然後slideUp/slideDown或fadeIn/fadeOut的問題是動畫可能會過早地結束並保持不正確的高度/不透明度。

Answer 4

問題是，通過在任意點停止，CSS變得混亂了。

從當前狀態的fadeIn()，​​，slideUp()和slideDown()移動到一個新的，然後還原到 - 而不是原來的CSS。

您需要將CSS恢復爲可用狀態以在.stop（）之後繼續，或者更清楚地指定動畫目標。

正如其他人所說的，通過確保停止動畫時，它可以跳轉到最後，而不是將所有內容都置於任意狀態，從而使CSS獲得正確的位置。

UPDATE：

看看代碼在你的演示此更新：http://jsfiddle.net/hWTT6/5/

它可能不是正是你怎麼想的那樣去執行，但訣竅，如果你不希望動畫能夠順利進行，就是讓動畫恢復到可以繼續從你想要的狀態繼續的狀態。

$(function() { 
    $('#fade') 
    .mouseenter(function() { 
     $('#fg_fade').stop().animate({ 'opacity': 0 }, 'slow', function() { 
      $('#fg_fade').css('height', '100%'); 
     }); 
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().animate({ 'opacity': 1, 'height': '100%' }, 'slow'); 
    }); 

    $('#slide_fire') 
    .mouseenter(function() { 
     $('#fg_fade').stop().animate({ 'height': 0 }, 'slow', function() { 
      $('#fg_fade').css('opacity', 1); 
     }); 
    }) 
    .mouseleave(function() { 
     $('#fg_fade').stop().animate({ 'height': '100%' }, 'slow', function() { 
      $('#fg_fade').css('opacity', 1); 
     }); 
    }); 
}); 

Answer 5

的問題是由方式fadeIn引起的，fadeOut等方面的工作。你可能預期它們會在0和1之間褪色。但是，實際上它們會在0和「基線」不透明度之間褪色。你可以在這裏看到：

http://jsfiddle.net/hWTT6/7/

你會注意到我最初的不透明度設置爲.5。現在，當我撥打fadeIn時，它不會完全消失到1，它會消失到我的基線.5。當您提前停止動畫時會出現問題，「基線」會變成停止時的不透明度。現在，當您撥打fadeInmouseleave時，它會嘗試淡入此新基線並發現它已經在那裏。您可以前往這裏這說明：

http://jsfiddle.net/hWTT6/8/（原件，但.stop）

如果你把你的鼠標slide然後通過動畫刪除中途，它會在中途停止。現在將鼠標放回slide並等待動畫完成。如果您現在移除鼠標，您會看到它滑回到第一個動畫停止的位置。這是因爲這是新的「基準」。

你要解決這個問題的方法實際上是用更明確的動畫替換fadeIn，fadeOut等。例如，使用fadeTo告訴它褪色0和1之間：

http://jsfiddle.net/hWTT6/6/

注意，因爲我告訴它褪色 0或 1一切正常。可以使用 animate代替 slideUp和 slideDown來做類似的事情。