1

我需要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()，它在对另一个 div 执行幻灯片效果之前等待slideToggle()完成（我被迫这样做，因为在完成之前不会sliteToggle()吐出 final ）。height()div A

有没有办法做到这一点，以便同时div A顺利div B更新？即有没有办法让高度在完成之前slideToggle()更新（这样我就可以在与on相同的时间调用）？div A .animate()div Bdiv A

注意：我不为 CSS 中的任何 div 使用固定高度，我想保持简单

或者，有没有办法让我只用 CSSdiv B来匹配div A高度？

4

1 回答 1

1

如果您能够设置 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
});
于 2013-01-12T14:47:40.670 回答