多個元素的jQuery動畫/ slideUp/slideDown

Question

所以我一直在做一些搜索，我會繼續看，但我想現在是時候把我的問題提交給SO社區。

我正在研究一個小項目，涉及一個帶可變高度的固定標題。的基本結構是這樣：

<header> 
    //any amount of elements 
    //meaning this will have varying heights 
    //I'll also be able to "open" and "close" this header 
    //using slideUp and slideDown (because the end height varies I don't want to use animate) 
</header> 
<section> 
    //body content 
</section> 

作爲正常報頭（即，非CSS「position'ed）此就可以了。這將在html流程的正常情況下，它會與它下面的內容進行交互。當標題滑向下面的部分時，它也會滑落，當它向上滑動時，反過來會發生。它的工作原理如下http://jsfiddle.net/byazaki/7FcJF/

現在，如果標題上的位置是固定的，則下面的部分不會受到它的上下移動影響，因此引入了一個'header-spacer'元素來取代它的位置。

<header> 
    //any amount of elements 
</header> 
<header spacer> 
    //in theory this would resize with the 
    //header as it slides up and down to mimic 
    //its effect on the other elements in the flow. 
</header spacer> 
<section> 
    //body content 
</section> 

這聽起來很簡單吧？一般來說，如果我知道我的球頭在打開的時候會有多大，當它關閉的時候會有多小。爲了簡單起見，我們只是說它在關閉時是0，所以現在我只需要擔心它何時打開。

對不起，很長的介紹，但這導致我回到我的初始點：如果我不知道我的標題的目標「高度」如何動畫我的spacer？做.slideDown不起作用。

一個解決方案，我想的是做這樣的事情：

function setSpacer() = { spacer.css('height', header.height())}; 
var interval = setInterval(setSpacer, 10); 
header.slideDown(500, function(){ 
    clearInterval(interval); 
}); 

很抱歉，如果有語法錯誤之類的東西只是想畫的畫......基本上我開始設置間隔高度到標題高度每10毫秒，然後當標題完成動畫時清除間隔。

我還沒有實現，因爲我很好奇，如果有一個更優雅的解決方案來解決我的問題，或者甚至可以做一些我不知道的w/jQuery動畫分支？

note： 另一個想法是編寫一個擴展slideUp（）/ slideDown（）/ animate（）類的插件，以獲取包含1個或多個html元素的參數並鏡像目標對象的動畫。

任何意見或反饋將是非常歡迎的，謝謝：d

Answer 1

這是一個有點不清楚你想要什麼。

.slideDown()/.slideUp()用於顯示和隱藏內容，在高度設置之間沒有。如果你想確定自己的身高，我建議你改用.animate()。

我這是怎麼解釋這個問題

我給了主頭一個position: fixed並提出另一個<header id="spacer"></header>。 開始的時候，我註冊了主標題的默認高度，並給墊片賦予相同的高度。然後，我暫時添加一個full_height類，它基本上只是一個height: auto，並且在具有該類時註冊高度。從此事情應該很簡單。在這兩個元素上使用slideDown或slideUp，或者在兩個元素上使用.animate（）來混合默認/全高。

有了這樣說，這裏使用了slideDown /效果基本show這兩個例子和.animate

.slideDown()/.slideUp()

Example |代碼

//The full_height class is just a "height: auto" 
var defaultHeight = $("#header").outerHeight(), 
    entireHeight = $("#header").addClass("full_height").outerHeight(); 

$("#header").removeClass("full_height"); 
$("#spacer").height(defaultHeight); 

$('#button').click(function() { 
    if ($('#header').hasClass('hidden')){ 
     $('#header, #spacer').slideDown().removeClass('hidden'); 
    } else { 
     $('#header, #spacer').slideUp().addClass('hidden'); 
    } 
}); 

.animate()

Example |代碼

//The full_height class is just a "height: auto" 
var defaultHeight = $("#header").outerHeight(), 
    entireHeight = $("#header").addClass("full_height").outerHeight(); 

$("#header").removeClass("full_height"); 
$("#spacer").height(defaultHeight); 

$('#button').click(function() { 
    if ($('#header').hasClass('hidden')){ 
     $('#header, #spacer').animate({ 
      height: defaultHeight //either use default height or entire height 
     }, 500).removeClass('hidden').show(); 
    } else { 
     $('#header, #spacer').animate({ 
      height: 0, //either use default height or 0 
     }, 500, function(){ 
      $(this).hide(); //hide if you're going to use 0 
     }).addClass('hidden'); 
    } 
});