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 );
});

现在当我点击它作为第一个'切换'时，它只是立即显示（没有动画），当我点击第二个'切换'时，它很好地向上滑动。

有没有办法用漂亮的动画将它滑落到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 with height运行动画功能。

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');
}

我也不是很有经验，所以原谅邋code的编码。

jQuery - 动画/滑动到高度：100％

3 个答案: