在jQuery中从下到上动画div而不是从上到下[重复]

Posted 2023-05-08

【中文标题】在jQuery中从下到上动画div而不是从上到下[重复]

【英文标题】：Animate div from bottom to top instead of top to bottom in jQuery [duplicate]

【发布时间】：2013-03-12 09:23:10

【问题描述】：

我有一个div，它在触发点击功能时动画到它的height：

$('#menu').click(function() 
  $('#test').animate(
      height: 'toggle'
    , 290, function()     
  );
);

到目前为止效果很好。但我想从下到上为div 设置动画，这与fiddle 不同。

有什么办法吗？

【参考方案1】：

你可以把它放在一个容器里并绝对定位它吗？：

HTML：

<a href="#" id="menu">click me for menu</a>
    <div id="cont">
    <div id="test"></div>
</div>

CSS：

#cont
    height:500px; width:50px; position:relative;

#test
    height: 500px; width: 50px; background-color: #000; display: none; position:absolute; bottom:0; left:0;

JavaScript：

$('#menu').click(function() 
    $('#test').animate(
        height: 'toggle'
        , 290, function() 
    );
);

Fiddle

编辑：为什么会这样 我在菜单周围放置了一个容器，并赋予它position:relative 的样式。我假设的菜单 (#test) 已被赋予样式position:absolute，这意味着您可以根据top、right、bottom 和left 相对于包含元素（提供它有一个position 而不是默认值，因此我们给容器一个relative 位置）。如果我们给元素一个top:0;left:0，该元素的左上角将粘在其父元素的左上角，类似地，如果我们这样做top:0;bottom:0，则该元素的左下角将粘在其父元素的左下角。 漫无目的，不是吗？所以，总而言之，#test 被“卡”在其父级的底部，因此它从底部开始生成动画。另一个要点，容器高度很重要！因为我们给#test一个绝对位置，它不会将容器推到它的高度，所以我们设置高度以确保#test从容器顶部加载500px。

【讨论】：

你打败了我。我试图弄清楚如何修复基本情况。 :(jsfiddle.net/uWnjx/7我最后做了一个假点击来修复它。

谢谢！正是我需要的，但有一个问题......我真的不明白那里到底发生了什么！为什么它的属性是从下到上工作的？你能给我解释一下，让我明白吗！

高度总是向下增加。如果我们告诉它没有更多的“向下”可以走，我们可以强制它向上增加（让它看起来向上增加）。这是通过使用具有绝对定位的 css 并告诉它bottom:0;

来实现的

有趣，这意味着如果没有更多空间来增加高度属性使用的正常方式，动画会自动采取另一个方向？不错 jquery 不错！

编辑完成，希望有意义。阅读element positions