0

所以我一直在做一些搜索，我会继续寻找，但我认为是时候向 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>
  //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

4

1 回答 1

1

有点不清楚你想要什么。

.slideDown()/.slideUp()用于显示和隐藏内容，中间没有高度设置。如果你想决定自己的身高，我建议你.animate()改用。

这就是我解释这个问题的方式

我给了主标题 aposition: fixed并制作了另一个<header id="spacer"></header>. 一开始，我注册了主标题的默认高度，并将相同的高度赋予垫片。然后我临时添加一个 class full_height，它基本上只是 aheight: auto并在它有那个类时注册高度。从那时起，事情应该很简单。要么在两个元素上使用 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');
    }
});
于 2012-04-04T15:36:21.937 回答