jQuery的動畫在開始顛簸和結束

Question

這是我的代碼（見小提琴here）：

$('div').on('click', function() { 
    $('.well') 
     .stop() 
     .animate({ 
     height: "toggle", 
     opacity: "toggle" 
    }); 
}); 

我有一個引導.well下面的東西。通過查看下面的內容，注意動畫開始和結束時的不連續性。

如何避免這些動畫不連續？

Answer 1

檢查了這一點http://jsfiddle.net/dLVWr/1/：

HTML：

<div>Click to show/hide</div> 
<div class='container'> 
    <div class='well'>....</div> 
</div> 
<div>Stuff below</div> 

JS：

$('div').on('click', function() { 
    $('.container') 
     .stop() 
     .animate({ 
     height: "toggle", 
     opacity: "toggle" 
    }); 
}); 

與您的代碼的問題是，well div有兩個文本的高度和填充。切換不透明度和高度時，首先，內容高度爲零，表示填充。這就是跳躍的原因。

爲避免這種情況，請確保您應用.animate的div沒有邊距/填充。

Answer 2

有一個小的踢球，因爲你是動畫的內容的高度和忽視它的外部高度。

這意味着padding,border和margin值將在元素的display切換後啓動。也就是說，在隱藏它之後動畫完成之後，或者動畫在顯示時開始。

您應該改用.slideToggle()。

$('div').on('click', function() { 
    $('.well').stop().animate(); 
});