jQuery动画高度每次都不会切换扩展答案

【问题标题】：jQuery animate height not toggle expand every timejQuery动画高度每次都不会切换扩展
【发布时间】：2012-07-13 21:56:03
【问题描述】：

我无法让 jQuery animate 工作。要启动 div，使用 .hide() 隐藏，然后单击我想扩展 div 高度的按钮。切换动画效果很好，但我不想切换。

Toggle 这样做：div 被隐藏，我触发下面的代码，完美运行，然后 div 被隐藏，再次触发 - div 弹出全高，动画下降到 0px。我希望它每次都从隐藏到扩展。

$('#logincontainer').animate(
    { 'height':  'toggle' }, 'slow'
);

我试过了

{ 'height':  '552px' }, 'slow'
{ 'height':  'auto' }, 'slow'

var h = document.getElementById('logincontainer').scrollHeight;
{ 'height':  h + 'px' }, 'slow'

我只想将高度扩展到 552px，div 每次都已经是这个值了。

【问题讨论】：

你不能真正在 hidden 和 height 之间制作动画，因为它们是不同的东西。您可以在 0 到 552 之间为高度设置动画，或者使用 slideUp() 和 slideDown()，或者如果它位于屏幕顶部，您可以在 0 到 -552 之间设置其 top 的动画
sample fiddle here

标签： javascript jquery jquery-animate

【解决方案1】：

你可以试试slideToggle():

通过滑动显示或隐藏匹配的元素。

$('#trigger').click(function(e){
    e.preventDefault()
    $('#logincontainer').slideToggle('slow');
})

DEMO

【讨论】：

【解决方案2】：

         $('#logincontainer').animate(
             { 'height':  'show' }, 'slow'
          );

'show' 是我每次都在寻找扩展的神奇 jQuery 词，隐藏时我也必须手动将高度设置回 0。

【讨论】：