用jquery点击改变div的高度答案

【问题标题】：Change height of div on click with jquery用jquery点击改变div的高度
【发布时间】：2012-01-13 09:59:06
【问题描述】：

我正在尝试使用以下代码扩展 div 元素的高度：

html:

<div id="expandbtn">more..</div>

<div id="portfolio"><div class="itemweb" title="lol" rel="#derp"><div class="thumb"><img src="images/items/skills.jpg" title="Skills" rel="#derp"/></div>

脚本：

$('#expandbtn').click(function(){
$('#portfolio').animate({height:'72px'}, 500);});

css:

#portfolio {
width:914px;
height:295px;
margin:0 0 0 -8px;
overflow:hidden;}

但这行不通。我做错了什么？

【问题讨论】：

从原始高度 (295px) 到 72px 这意味着你正在收缩它:) .. 顺便说一句，你的代码看起来不错.. 也许你什么都看不到，因为投资组合 div 没有背景
为我工作，检查这个：jsfiddle.net/TrDtc/4
我刚刚将脚本粘贴到

标签： jquery height jquery-animate

【解决方案1】：

它工作得很好，但尝试设置位置和背景颜色来查看元素，例如THIS FIDDLE。

此外，它不会为投资组合 div 中元素的高度设置动画，如果您正在尝试这样做（除非这些元素的大小以百分比为单位）？

【讨论】：

【解决方案2】：

您的代码很好。你也可以试试

$('#portfolio').css("height","74px");

尝试放置一些背景颜色或图像以清晰地可视化

小提琴：http://jsfiddle.net/49HQM/4/

【讨论】：

【解决方案3】：

在文档准备好后尝试加载它：

  $(document).ready(function(){
      $('#expandbtn').click(function(){
      $('#portfolio').animate({height:'72px'}, 500);
   });

【讨论】：

动画效果不错