Question

我在父<div>内留下了两个<div>。使用jQuery，div.will_slide_down会在某个时候向下滑动（使用$("div.will_slide_down").slideDown()）。当它向下滑动时，div.first的高度也应该增加，以同时匹配div.second的高度。

我该怎么做？

 <div class="wrap">
      <div class="first" style="width: 200px; float: left;"></div>
      <div class="second" style="width: 700px; float: left;">
           <p>BlaBlaBla</p>
           <div class="will_slide_down" style="display: none">Some hidden text</div>
      </div>
 </div>

我能想到的唯一方法是在slideDown的{{1}}完成时运行一个函数，但这会弄乱布局。它应该同时发生。

Answer 1

我认为最好的方法是使用.animate()和步进功能。在动画的每个“步骤”触发步进功能。这样的事情可以解决问题：

$('div.will_slide_down').animate({height: 'show'}, {step: function(now, fx){
    var new_height = $('div.second').height;
    $('div.first').css('height', new_height);
}});

Answer 2

假设某些事件会触发您的向下滑动，请尝试以下操作：

$(document).ready(function() {
$("element").click(function() {
    follower($("div.first"));
$("div.will_slide_down").slideDown()).
})
    })

    function follower(el) {
        if ($("div.will_slide_down").is(":animated"))
        {
            var leader = $("div.will_slide_down");
            while(leader.is(":animated"))
                  {
                  el.animate({
                      height: leader.css('height')
                  },3000);
                  }
        }
    }

Answer 3

你可以做的是，将.will_slide_down置于屏幕外的某个位置 - 不隐藏它 - 在页面加载时测量其高度。然后你可以隐藏它，移回它并使用高度（添加.second的初始高度...）来计算.first的新高度，并在同一时刻为这两个高度设置动画。 / p>

jQuery＆amp; CSS - 在动画时匹配div的高度

3 个答案: