多个元素上的 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 '定位'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，所以现在我只需要担心它何时打开。

抱歉，介绍很长，但这让我回到了最初的观点：如果我不知道我的标题的目标“高度”，我如何为我的间隔设置动画？做 .slideDown 不起作用。

我想到的一个解决方案是这样做：

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

对不起，如果有语法错误或类似的东西只是试图绘制图片......基本上我开始每 10 毫秒将间隔高度设置为标题高度，然后当标题完成动画时它会清除间隔。

我还没有实现这个，因为我很好奇是否有更优雅的解决方案来解决我的问题，或者甚至可以使用我不知道的 jQuery 动画分支来做些什么？

注意： 另一个想法是编写一个插件，扩展 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/slideUp 和 .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');
    }
});