【问题标题】：Change div height onclick with animation使用动画更改 div 高度 onclick
【发布时间】：2011-07-28 17:27:48
【问题描述】：

我正在尝试使用 div 创建一个画廊，当您单击它们时会改变它们的高度。理想情况下，这将包括平滑扩展 div 高度的动画。每个页面上每个 div 会有几个，所以它只需要展开那个部分。

实际上应该是这个页面上的新闻部分：http://runescape.com/

如果可能的话，我想用 JavaScript/jQuery 来做。

【问题讨论】：

【解决方案1】：

我知道这是旧的，但如果有人似乎在这里找到了路。 @JacobTheDev 答案很棒，而且没有 jQuery！对于没有在您切换 css 类的同一点分配事件的用例，我添加了更多内容。

HTML

<div id='item' onclick='handleToggle()'> </div>

JS

handleToggle(event){    
  document.getElementById(event.target.id).classList.toggle('active')
}

CSS

#item {
  height: 20px;
  transition: 1s;
}

.active {
  height: 100px;
}

【讨论】：

【解决方案2】：

这是我最终使用的代码：

JS：

document.getElementById("box").addEventListener("click", function() {
    this.classList.toggle("is-active");
});

CSS：

#box {
    background: red;
    height: 100px;
    transition: height 300ms;
    width: 100px;
}

#box.is-active {
    height: 300px;
}

HTML：

<div id="box"></div>

小提琴：

https://jsfiddle.net/cp7uf8fg/

【讨论】：

【解决方案3】：

完整的解决方案：

分隔符 DIV 和内容 DIV 上的边距或填充都有效，但最好仍然有分隔符 DIV。

然后可以在您的 CSS 文件中应用响应式设计。这更好，因为使用 JAVA 屏幕会闪烁！如果您使用网格系统，则会有一个媒体查询部分，您需要包含您的设置。

我在高清屏幕上使用了一个小间隔，而它增加到移动屏幕！

如果你在标题中有面包屑，多行可能会很棘手，所以最好有一个 java，但为了速度而推迟。请注意，动画是为了摆脱屏幕闪烁。

只有当面包屑很长时才会触发这个java，否则通过网格应用单个CSS并且根本没有闪烁。即使 java 通过优雅的动画解雇了它的工作

var header_height = $('#fixed_header_div').height();
var spacer_height = $('#header_spacer').height() + 5;    

if (header_height > spacer_height) {
    $('#header_spacer').animate({height:header_height});
};

请注意，我已应用 5px 容差边距！

这有帮助:-)

【讨论】：

【解决方案4】：

$('div').click(function(){
    $(this).animate({height:'300'})
})

在http://jsfiddle.net/tJugd/查看工作示例

【讨论】：

这行得通，但我决定结合使用 CSS3 和 JavaScript。
@Jacob 你能用你使用的东西发布答案吗？看起来这可能对未来的人也有帮助

【解决方案5】：

jQuery 规则。看看这个。

http://api.jquery.com/resize/

【讨论】：

【解决方案6】：

试试

$('div').toggle(function(){
    $(this).animate({'height': '100px'}, 100);
}, function(){
    $(this).animate({'height': '80px'}, 100);
});

DEMO

【讨论】：