11

私はここに単一のコードを持っています：

$('.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％までスライドさせる方法はありますか？

4

3 に答える 3

10

多分あなたは次のようなことをすることができます：

$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

于 2009-08-12T01:29:04.577 に答える
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');
  }
}
于 2012-03-27T16:09:46.387 に答える
0

自分で解決策を探しているときにこの投稿を見つけました.Karim79は、変数とheight()関数を使用するという素晴らしい提案をしました.

私にとっては、スタイルシートで事前に設定された高さが定義されているため、100% の高さから始めることはありません。したがって、展開する関数で行うことは、展開する特定の要素に戻り、css の高さを 100% に変更し、高さを変数に返すクエリを持つ変数を作成することです。次に、高さの css を元に設定し (将来 css を編集する場合に備えて、vars に元のプリセットの高さを伝えることもできたと思います)、高さのある 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');
}

私もあまり経験がないので、ずさんなコーディングを許してください。

于 2012-06-21T20:25:19.327 に答える