在完成执行之前获取jquery的slideToggle（）的最终高度 – 在CSS中没有固定的高度
我需要在我的网站上使用div B根据另一个div A的运行时间更改高度动态更新。 div A使用jquery slideToggle() [在div A几个div上]，但div B应该只是改变（同时）以匹配div A的当前高度。 panel_toggle1和panel1包含在div A ：
$(document).ready(function () { $("#panel_toggle1").click(function () { $("#panel1").slideToggle("slow", function () { var divAheight = $("#divA").height(); $("#divB").animate({ height: divAheight }, "slow"); }); }); });
上面的代码确实基本上是我想要的，但是，由于callback() ，它等待slideToggle()完成之前对另一个div执行幻灯片效果（我被迫这样做因为sliteToggle()不吐超出div A的最终height()直到它完成）。
有没有办法做到这一点，以便div A和div B平滑更新？ 即有没有办法获得高度slideToggle()将在它完成之前更新div A （这样我就可以在div B上同时在div B上调用.animate() ）？
注意：我没有为CSS中的任何div使用固定高度，我想保持简单
或者 ，有没有一种方法可以保持div B以匹配div A的高度与CSS？
如果你能够设置divA的固定目标高度，解决方案将是微不足道的，你只需要设置你的动画同时运行，例如通过设置queue=false 。
由于您似乎想要在不知道原始动画的最终高度的情况下同时运行这些动画，因此解决方法是使用两个动画来实现效果：
var $divB = $("#divB"); $divB.animate({ height: '600px' // some arbitrary height approaching target height }, { duration: 5000 /* longer than the next animation */, queue: false }); $("#panel1").slideToggle({ duration: 'slow', queue: false, complete: function () { var divAheight = $("#divA").height(); // stop the animation and begin another with the correct target height $divB.stop().animate({ height: divAheight }, "slow"); } });
在这里，两个div同时开始动画。 当slideToggle动画完成时，代码将停止divB的高度动画并开始divB = divA高度的新高度动画。 有点hacky，但你必须等到第一个动画完成才能获得更新的高度。
另一种选择是执行计算以获取slideToggle结果的高度，然后运行同步动画：
var newHeight = $("#divA").height() - $("#panel1").height(); var $divB = $("#divB"); $divB.animate({ height: newHeight + 'px' }, { duration: 'slow', queue: false }); $("#panel1").slideToggle({ duration: 'slow', queue: false });