如何切換divs的高度，使其看起來好像在滑落？

Question

請看我開始的小提琴。 http://jsfiddle.net/rabelais/6bt70uhj/1/

$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
$('#bio-line-2').animate({height: 'toggle'});
});

當您單擊鏈接時，第一句話從左側滑入，第二行從第一行進入。 這與我要達到的目標非常接近，但是我需要第二行看起來更像是作為一個整體滑動，而不是看起來像在被揭示。

我已經嘗試過使用.SlideDown，但這與.animate具有相同的效果。

有任何想法嗎？ 謝謝

Answer 1

可以嘗試一下，如果我正確理解了您的問題

 $('#name-a').click(function() { $('#bio-line-1').animate({width: 'toggle'}); window.setTimeout(function (){$('#bio-line-2').slideToggle( "slow" ); }, 300); }); 

Answer 2

使用此代碼：-

CSS：

#bio-line-2 {
left: 120px;
position: fixed;
top: 20px;
width: 433px;
z-index: 1;
margin-top:20px;

}

jQuery的

$('#name-a').click(function() {
$('#bio-line-1').animate({width: 'toggle'});
$('#bio-line-2').animate({marginTop: 'toggle'});
});

Answer 3

如果要使整條線作為對象滑動，則不是要切換的高度，而是相對於應從其滑動的元素的位置。 如果您只是適當地偏移了元素然后使用：

 $('#bio-line-2').animate({marginTop: 'toggle'}); 

正如Dipesh提到的。

如果要確保動畫在左行第一行之前沒有開始，則可以傳入一個函數以在第一個動畫完成后執行，如下所示：

$('#bio-line-1').animate({width: 'toggle'},function(){ 

  $('#bio-line-2').animate({marginTop: 'toggle'});

});

這樣可以確保第二個動畫等待第一個動畫完成。