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

Question

所以我一直在做一些搜索，我會繼續尋找，但我認為是時候向 SO 社區提出我的問題了。

我正在做一個小項目，涉及一個固定的 header 和可變高度。 基本結構是這樣的：

<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>

作為一個正常的 header（即非 css '定位'），這會很好。 它會在 html 流的正常上下文中，並且會與其下方的內容進行交互。 當 header 向下滑動時，它下面的部分也會向下滑動，而當它向上滑動時，當然會發生相反的情況。 它的工作方式類似於http://jsfiddle.net/byazaki/7FcJF/

現在，如果 header 上的 position 是固定的，則下面的部分不會受到上下移動的影響，因此引入了一個“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>

這聽起來很簡單吧？ 通常是的，如果我知道我的 header 打開時有多大，關閉時會有多小。 為簡單起見，我們只說它關閉時為 0，所以現在我只需要擔心它何時打開。

抱歉，介紹太長了，但這讓我回到了最初的觀點：如果我不知道我的 header 的目標“高度”，我該如何制作我的間隔物的動畫？ doing.slideDown 不起作用。

我想到的一種解決方案是做這樣的事情：

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

抱歉，如果有語法錯誤或類似的問題只是試圖繪制圖片...基本上我開始每 10 毫秒將間隔高度設置為 header 高度，然后當 header 完成動畫時它會清除間隔。

我還沒有實現這個，因為我很好奇是否有更優雅的解決方案來解決我的問題，或者甚至可以做一些我不知道的 jQuery animation 分支？

注意：另一個想法是編寫一個擴展 slideUp()/slideDown()/animate() 類的插件，以采用包含 1 個或多個 html 元素的參數，並鏡像目標 object 的 animation。

非常歡迎任何想法或反饋，謝謝：D

Answer 1

有點不清楚你想要什么。

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

這就是我解釋這個問題的方式

我給主要的 header 一個position: fixed並做了另一個<header id="spacer"></header> 。 一開始我注冊了main header的默認高度，給spacer同樣的高度。 然后我臨時添加一個 class full_height ，它基本上只是一個height: auto並在它具有 class 時注冊高度。從那時起事情應該很簡單。 在兩個元素上使用 slideDown 或 slideUp，或者在兩個元素上使用 .animate() 來擾亂默認/全高。

話雖如此，這里有兩個使用 slideDown/slideUp 和 .animate 的例子

.slideDown() / .slideUp()

范例| 代碼

//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()

范例| 代碼

//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');
    }
});