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'位置'），这没关系。它将在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毫秒标题高度，然后当标题完成动画时它会清除间隔。< / p>

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

请注意：另一个想法是编写一个扩展slideUp（）/ slideDown（）/ animate（）类的插件，以获取包含一个或多个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');
    }
});

多个元素上的jQuery动画/ slideUp / slideDown

1 个答案: