jQueryの - 高さ/スライドをアニメーション：100％

Question

は、私がここにsipleコードがあります。

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

を、私は最初の「トグル」として、それをクリックしたときに今、それだけで（アニメーションなし）瞬時に示しており、私は2番目の 'トグル'をクリックすると、うまく滑ります。

いいアニメーションで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は、変数を使用しての素晴らしい提案を持っていたとheight()機能。

私のスタイルシートには高さが設定されているので、私は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'); 
} 

私はまた、あまりにも経験が少ないので、誤ったコーディングを許していません。