jQuery animations/slideUp/slideDown on multiple elements

jQuery animations/slideUp/slideDown on multiple elements

本文关键字：multiple elements on slideUp animations jQuery slideDown      更新时间：2023-09-26

所以我一直在做一些搜索，我会继续寻找，但我认为是时候向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>
  //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，所以现在我只需要担心它何时打开。

很抱歉有这么长的介绍，但这让我回到了最初的观点：如果我不知道我的标题的目标"高度"，我该如何设置间隔符的动画？滑行滑行不起作用。

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

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

您想要什么有点不清楚。

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

这就是我对问题的解释

我给了主标题一个position: fixed，并制作了另一个<header id="spacer"></header>。一开始，我注册了主标题的默认高度，并为间隔符指定了相同的高度。然后我临时添加一个类full_height，它基本上只是一个height: 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');
    }
});
相关文章：