jQuery 和CSS - 在动画时匹配 div 的高度

发布于 2024-11-30 20:13:26 字数 760 浏览 0 评论 0原文

我有两个

在父

内向左浮动。使用 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>

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

原文

I have two <div>'s floated left within a parent <div>. Using jQuery, the div.will_slide_down will slide down at some point (using $("div.will_slide_down").slideDown()). When it is sliding down, the div.first's height should also increase to match the height of the div.second at the same time.

How can I do that?

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

The only way I can think of is to run a function when the slideDown of the div.second is complete, but this will mess up the layout. It should happen at the same time.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

太阳哥哥 2024-12-07 20:13:27

假设您的下滑将由某些事件触发，请尝试如下操作：

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

Assuming your slide down will be triggered by some event, try something like this:

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

回复收藏 0 原文

心凉怎暖 2024-12-07 20:13:27

您可以做的是在页面加载时将 .will_slide_down 定位在屏幕外的某个位置 - 不隐藏它 - 以测量其高度。然后您可以隐藏它，将其移回并使用高度（添加 .second... 的初始高度）来计算 .first 的新高度并进行动画处理两者同时发生。

回复收藏 0 原文

绮烟 2024-12-07 20:13:26

我认为最好的方法是使用 .animate() 和 step 函数。步骤函数在动画的每个“步骤”处触发。像这样的事情应该可以解决问题：

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

I think the best way would be to use .animate() and the step function. The step function is fired at each 'step' of the animation. Something like this should do the trick:

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

回复收藏 0 原文

~没有更多了~