获取jQuery的的slideToggle(最终高度),它执行完之前 - 没有CSS固定高度(Get

2019-10-17 14:13发布

我需要一个div B在我的网站根据运行时更改另一个高度动态更新div Adiv A使用的jquery slideToggle() [在几个div的内部div A ],但div B应该只改变(在同一时间)来匹配的当前高度div Apanel_toggle1panel1内装在div A

$(document).ready(function () {
    $("#panel_toggle1").click(function () {
        $("#panel1").slideToggle("slow", function () {
            var divAheight = $("#divA").height();
            $("#divB").animate({ height: divAheight }, "slow");
        });
    });
});

上面的代码确实卑鄙但是我想要的东西,由于callback()它等待slideToggle()这样做对其他分区的幻灯片效果之前完成(我不得不这样做,因为sliteToggle()不吐出最终的height()div A ,直到其完成)。

有没有办法做到这一点,这样既div Adiv B同时顺利更新? 即是否有一种方式来获得高度slideToggle()将更新div A完成之前 (这样我就可以调用.animate()div B同时对div A )?

注意:我不使用固定的高度在CSS任何的div,我想保持简单

另外 ,有一个方法可以让我保持div B匹配div A的身高只有CSS?

Answer 1:

如果你能设置你的DIVA一个固定的目标高度,该解决方案将是微不足道的,你只需要设置你的动画同时运行,例如,通过设置queue=false

因为它看起来像你想不知道所导致的原创动画的高度同时运行这些动画,一个解决方法是使用两个动画来acheive效果:

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的高度。 有点哈克,但你必须等待,直到第一个动画完成,以获得更新的高度。

另一种选择是进行计算得到的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
});


文章来源: Get the final height of jquery's slideToggle() before it finishes executing - without fixed heights in CSS