jQuery的 - 動畫/幻燈片高度：100％

Question

我有一個賽普爾代碼在這裏：

$('.aktualita_sipky').toggle(function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: "100%", 
     }, 1500); 
}, function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: "120px", 
     }, 1500); 
}); 

現在，當我點擊它作爲第一個「切換」，它只是即時顯示（無動畫），當我點擊第二個「切換」，它很好地滑動。

有沒有一種方法可以將它滑動到100％的動畫效果呢？

Answer 1

也許你可以這樣做：

$height = $(window).height(); // returns height of browser viewport 
//Or 
$height = $(document).height(); // returns height of HTML document 
//Or 
$height = $(whatever).height(); 
$('.aktualita_sipky').toggle(function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: $height + 'px', 
     }, 1500); 
}, function() { 
    $(this).parent().find('.aktualita_content').animate({ 
     height: $height + 'px', 
     }, 1500); 
}); 

http://docs.jquery.com/CSS/height

Answer 2

我對這個解決辦法是增加了在div子元素的高度，加上一點點佔利潤：

function() { 
    $('.accordionblock.open').removeClass('open'); 
    var childrenheight = 0; $(this).children().each(function() {childrenheight += ($(this).height()*1.2)}); 
    $(this).animate({height:childrenheight},300).addClass('open'); 
    } 
} 

Answer 3

我發現這個職位，同時想辦法解決自己和Karim79不得不使用變量和的偉大的建議功能。

對我來說，我沒有從100％開始，因爲我在樣式表中定義了一個預設高度。所以我在擴展函數中做的是我做了一個變量，它有一個查詢返回到我想要展開的特定元素，並將css高度更改爲100％，並將高度返回給變量。然後我設置了高度的css（我想我可以用vars告訴原始預設高度以及在未來編輯css），然後使用帶有高度的var運行動畫功能。

function expandAlbum(){ 
    var fullHeight = jQuery(this).prev('.albumDropdown').css('height' , '100%').height(); 
    jQuery(this).prev('.albumDropdown').css('height' , '145px'); 
    jQuery(this).prev('.albumDropdown').animate({'height' : fullHeight}, 1000, function(){jQuery(this).stop();}); 
    jQuery(this).html('close'); 
} 

我也不是很有經驗，所以原諒sl coding的編碼。