javascript - 未知高度，如何做slideDown的效果？

问题描述

问 题

如何获取一个Div里，元素们累积出来的高度？如下代码
http://jsbin.com/nobifurisi/e...

我是想在手机端做一个slideDown的效果，但是jq自带的slideDown在手机上的动画效果太卡了。所以想用css3的transition模拟一个sldieDown,可是问题来了，我无法得知元素的高度。比如这个.bbb的height值，我现在是写死的300opx,但实际应该是.aaa里元素们累加出来的高度才对。那么这个高度究竟该怎么获取呢？谢谢

解决方案

css的话可以这个样子

  .aaa {
    background-color: #38f;
    color: #fff;
    max-height: 100px;
    transition: 1s;
    overflow: hidden;
    margin-left: 10px;
  }
  
  .bbb {
    max-height: 300px;
  }

这里max-height值不应设得太大，不然动画起始那段不自然；
JS的话就是获取子元素的高度加起来

$('#aaa').click(function() {
  var inner = $(this).find('div')
  var h = 0
  inner.each(function(i, el) {
    h += $(el).height()
  })
  $(this).height(h)
})

这篇关于javascript - 未知高度，如何做slideDown的效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！