11

我在这里有一个简单的代码：

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

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

有没有办法用那个漂亮的动画把它滑到 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 设置回来（我想我可以习惯 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');
}

我也不是很有经验，所以请原谅草率的编码。

于 2012-06-21T20:25:19.327 回答