Изменить высоту родительского div на основе высоты дочернего div с абсолютной позицией

Question

У меня есть простое слайд-шоу, которое я использую, чтобы пролистывать рекламные объявления для сайта сообщества. Я новичок в jquery, поэтому я не уверен, как изменить высоту родительского div на основе дочернего div, который следующий jquery. См. Ниже 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; } 

Jquery:

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

Вот что я сделал:

В принципе, я взял высоту слайда, который в настоящее время представлен и установить высоту .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; 
} 

Answer 2

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/