使用jQuery在点击时更改div的高度

Question

css:

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

但它无法工作。我做错了什么？

- Biels

---

从原始高度（295像素）缩小到72像素，这意味着你正在压缩它 :) 顺便说一句，你的代码看起来很好..也许你看不到任何东西是因为作品集div上没有背景。 - stecb

对我有效，查看这个：http://jsfiddle.net/TrDtc/4/ - Ricardo Binns

我刚刚将脚本粘贴到内容下面的</body>标签之前，然后它就起作用了！ - Biels

除了一个相当尴尬的时刻，我没有将jsfiddle设置为jQuery，它对我来说运行得很好。由于它并不是真正的答案，所以我删除了我的“回答”。 - SpaceBeers

Answer 1

你的代码非常好。你也可以尝试

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

尝试添加一些背景颜色或图像来更清晰地可视化。

fiddle : http://jsfiddle.net/49HQM/4/

- dku.rajkumar

Answer 2

当文档准备好时尝试加载它：

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

- user3470042

---

很棒的动画效果。 - Nuno Sarmento

Answer 3

它运行得很好，但是尝试设置位置和背景颜色以查看元素，例如此处的FIDDLE。

另外，如果您想要的是动画显示端口内元素的高度（除非这些元素的大小以百分比为单位），否则它将不会对其进行动画处理。

- adeneo