Question

改述这一点，我以前问得很糟糕。希望这能更好地解释我的目标，如果有人能提供帮助，我会非常感激：

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

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

所以我希望不断扩大的div的高度能够重新回到“自动化”状态。之后它扩大了。然后，如果用户再次单击该按钮以关闭div，脚本将重新测量高度并将其更改为当前像素值的任何值，以便可以将其动画回零。

基本上这将是一系列事件：

Div＃2加载height:0，此高度存储在变量中。
Div的高度设置为自动。
自动高度存储为像素值。
高度设定为零。
用户点击div＃1打开div＃2。
Div＃2的高度从零动画到像素高度值。
它的高度设置为＆＃39; auto＆＃39;动画完成后再一次。
用户查看或隐藏更改div高度的内容。
用户点击div＃1关闭div＃2。
测量Div＃2的当前高度并将其存储为另一个像素值。
Div＃2的高度设置为新的像素值。
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没有很多经验，看起来这样可行......

这里是实验的小提琴：https://jsfiddle.net/q00bdngk/1/

Answer 1

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

＆＃13;

$(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);
    }
  });
});

＆＃13;

#ev-sponsors {
  border: 1px solid;
  padding: 1em;
  text-align: center;
  cursor: pointer;
}

#ev-donate-form {
  height: 0;
  overflow: hidden;
}

＆＃13;

<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>

＆＃13;

但现在你遇到了问题。当你关闭它并重新打开它时，你会在动画中看到一个混蛋。那是因为你需要更新最终的高度。在关闭元素之前就这样做，你会很高兴。

＆＃13;

$(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);
    }
  });
});

＆＃13;

#ev-sponsors {
  border: 1px solid;
  padding: 1em;
  text-align: center;
  cursor: pointer;
}

#ev-donate-form {
  height: 0;
  overflow: hidden;
}

＆＃13;

<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>

＆＃13;

终极动画到高度：自动用jQuery（如何保持实际高度：自动）

1 个答案: