防止同時發生多個jQuery動畫

這個問題看起來類似於防止動畫排隊的其他問題，但是這個問題是不同的。防止同時發生多個jQuery動畫

爲了說明的目的，我在jsFiddle上創建了一個簡化的例子。（在這個例子中，#box可以設置爲50％的寬度，但是我正在處理的實際應用程序更加複雜，並且需要複雜的box元素計算）。

我有一個箱子裏面的容器。當容器被調整大小時，該框應該被動畫並調整到一定的大小。但是，如果您緩慢調整結果框的大小（在1秒的時間內），則#box會以一種乾脆的方式調整大小。

$('#container').resize(function() { 
    $("#box").animate({'width':$('#container').width() * 0.5}); 
});

理想情況下，我想動畫合併爲一個，這樣它在一個不錯的方式平穩改變大小。

謝謝！

來源

2012-09-17 ambiguousmouse

正如你可能已經發現了其他問題，申請'.stop（真，真）'似乎使它不那麼生澀。 –

設置stop(true, true)。

$('#container').resize(function() { 
    $("#box").stop(true, true).animate({'width':$('#container').width() * 0.5}); 
});

Demo

來源

2012-09-17 03:31:26 thecodeparadox

你可以使用CSS3過渡，例如：

#box 
{ 
transition: width 2s; 
-moz-transition: width 2s; /* Firefox 4 */ 
-webkit-transition: width 2s; /* Safari and Chrome */ 
-o-transition: width 2s; /* Opera */ 
}

讓我知道，如果這個工程:)

來源

2012-09-17 03:32:32 HasanAboShally

如果這是一個可能的選擇，它可能是最好的辦法。它使動畫更平滑，並且不需要花哨的JavaScript邏輯。 http://jsfiddle.net/B7UGm/4/ – banzomaikaka

IV使用了好幾次，在過去:) 並將其與最喜歡的背景顏色屬性的作品，所以ü可以使褪色的背景..或平滑的動態標題.. .. – HasanAboShally

是的，這是一個很好的解決方案，但不幸的是，IE8和IE9不支持CSS3過渡:( – ambiguousmouse

ü也可以使用.delay （）例如：

$('#foo').slideUp(300).delay(800).fadeIn(400);

來源

2012-09-18 19:05:41 HasanAboShally

防止同時發生多個jQuery動畫

回答

相關問題