jquery - 根据具有绝对位置的子 div 的高度更改父 div 的高度

Question

我有一个简单的幻灯片，用来翻阅社区网站的广告。我是 jquery 的新手，所以我不确定如何根据 jquery 下一步拉出的子 div 来更改父 div 的高度。有关我的代码，请参阅下面的 jsfiddle。

HTML：

<div class="slideshow" id="ads_slideshow">
  <div id="slide1" class="slide">
    <p>Test Advertisement</p>
    <p>Just testing advertisements</p>
  </div>
  <div id="slide2" class="slide">
    <p>Test Ad 3</p>
    <p>One more test ad, just for clarity.</p>
  </div>
</div>

CSS：

.slideshow{ position: relative; border: 1px solid #000; }
#slide1, #slide2{ position: absolute; }

查询：

$(function () {
    $('.slideshow div').hide();
    $('.slideshow div:first-child').show();
    setInterval(function () {
        $('.slideshow div:first-child').fadeOut(500)
            .next('div').fadeIn(500)
            .end().appendTo('.slideshow');
    },
    2000);
});

jsfiddle：http: //jsfiddle.net/us3m9/4/

Answer 1

place this code :
-------------------------------

 $(function () {
     // height of the div
     var ht = $(".slideshow .slide").height();
     $(".slideshow").css("height",ht);

      $('.slideshow div').hide();
      $('.slideshow div:first-child').show();
      setInterval(function () {
        $('.slideshow div:first-child').fadeOut(500)
        .next('div').fadeIn(500)
        .end().appendTo('.slideshow');
         // height of the div
          var ht = $(".slideshow .slide").height();
         $(".slideshow").css("height",ht);         

      },
    2000);
}); 

js 小提琴：http: //jsfiddle.net/us3m9/7/

Answer 2

这是我所做的：

基本上，我采用了当前显示的幻灯片的高度并将高度设置.slideshow为该高度。

http://jsfiddle.net/8fTfX/

jQuery：

$(function () {
    $('.slideshow div').hide();
    $('.slideshow div:first-child').show();
    $('.slideshow').height($('.slideshow div:first-child').height())
    setInterval(function () {
        $('.slideshow div:first-child').fadeOut(500)
            .next('div').fadeIn(500)
            .end().appendTo('.slideshow');
        $('.slideshow').height($('.slideshow div:first-child').height())
    },
    2000);
});

CSS：（添加过渡，因为为什么不呢？）

.slideshow {
    position: relative;
    border: 1px solid #000;
    transition: height 500ms;
}
#slide1, #slide2 {
    position: absolute;
}