javascript - 最终动画到高度:auto with jQuery (How to retain actual height:auto)

Question

换个说法，我之前问得不好。希望这能更好地解释我的目标，如果有人可以提供帮助，我将非常感激:

我设置了两个 div，当您单击其中一个时，另一个会展开到适合其内容的高度。展开的 div 在 height:0;overflow:hidden 处加载，但由于动画需要实际值而不是 height:auto，因此高度暂时切换为“auto”，测量，存储在变量中以供动画使用，然后切换回零。

问题在于，展开的 div 包含用户可以选择查看或不查看的内容，如果用户查看较长的内容，它会被 chop ，因为父 div 已设置为该像素值高度。

所以我希望在展开后将展开的 div 的高度设置回“自动”。然后，如果用户再次单击按钮关闭 div，脚本将重新测量高度并将其更改为当前像素值，以便将其动画恢复为零。

基本上这将是事件的顺序:

1. Div #2 在 height:0 处加载，并且该高度存储在变量中。
2. Div 的高度设置为自动。
3. 自动高度存储为像素值。
4. 高度设置回零。
5. 用户点击 div #1 打开 div #2。
6. Div #2 的高度从零动态变化到像素高度值。
7. 动画完成后，其高度会再次设置为“自动”。
8. 用户查看或隐藏内容，这会更改 div 的高度。
9. 用户点击 div #1 来关闭 div #2。
10. Div #2 的当前高度被测量并存储为另一个像素 值。
11. Div #2 的高度设置为新的像素值。
12. Div #2 的高度动画回到零。

使用Box9's brilliant post ，我设置了以下代码，它成功完成了步骤 1 到 6。步骤 7 是重要的一步，我无法弄清楚，但我正在寻求有关步骤 7 到 11 的帮助。

$(function(){
    var el = $('#ev-donate-form'),
        curHeight = el.height(),
        autoHeight = el.css('height', 'auto').height();
        el.height(curHeight);
    $( "#ev-sponsors" ).click(function() {
        if(el.height() == 0)
            el.height(curHeight).animate({height: autoHeight}, 600);
        else
          el.height(autoHeight).animate({height: curHeight}, 600);
    });
});

我还没有做任何事情。我在想也许可以使用某种附加到点击函数的 setTimeout() 来在动画持续时间后将高度设置为自动？我的尝试都没有成功，但我对 jQuery 的经验不是很丰富，看起来这会起作用......

这是一个用于实验的 fiddle :https://jsfiddle.net/q00bdngk/1/

Answer 1

.animate function允许您传递完整函数。只要动画完成，该函数就会运行。此时，您可以将高度设置为auto，以允许其根据需要调整大小。

$(function() {
  var el = $('#ev-donate-form'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
  el.height(curHeight);
  $("#ev-sponsors").click(function() {
    if (el.height() == 0) {
      el.animate({
        height: autoHeight
      }, 600, function() {
        el.css('height', 'auto');
      });
    }
    else {
      el.animate({
        height: curHeight
      }, 600);
    }
  });
});

#ev-sponsors {
  border: 1px solid;
  padding: 1em;
  text-align: center;
  cursor: pointer;
}

#ev-donate-form {
  height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ev-sponsors">
  CLICK ME
</div>
<div id="ev-donate-form">
  <p><strong>
  Set the height of this div to 'auto' after the animation that opened it.
  </strong></p>
  <textarea rows="4" cols="50">
    Resize this text area to change the height.
  </textarea>
</div>

但是现在你遇到了一个问题。当您关闭并重新打开它时，您会在动画中看到一个抖动。那是因为您需要更新最终高度。在关闭元素之前执行此操作，您就可以开始了。

$(function() {
  var el = $('#ev-donate-form'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
  el.height(curHeight);
  $("#ev-sponsors").click(function() {
    if (el.height() == 0) {
      el.animate({
        height: autoHeight
      }, 600, function() {
        el.css('height', 'auto');
      });
    }
    else {
      autoHeight = el.height(); // Update the actual height
      el.animate({
        height: curHeight
      }, 600);
    }
  });
});

#ev-sponsors {
  border: 1px solid;
  padding: 1em;
  text-align: center;
  cursor: pointer;
}

#ev-donate-form {
  height: 0;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ev-sponsors">
  CLICK ME
</div>
<div id="ev-donate-form">
  <p><strong>
  Set the height of this div to 'auto' after the animation that opened it.
  </strong></p>
  <textarea rows="4" cols="50">
    Resize this text area to change the height.
  </textarea>
</div>