使用JQuery动画div的大小

Question

我是Jquery的业余爱好者，但离我想要的东西非常近。 单击对象时，我试图将包含div的动画设置为更大的高度。 我正在使用以下代码：

<div id="sliderone">
 <div id="nav">
  <div id="navone" style="text-align: center;">This is a clickable title</div>
 </div>

 <div id="ourteam">
  <div id="title"></div>
 </div>
</div>

<script type="text/javascript">
   $('#navone').click(function(){
   $('#title').html("<img src='http://placehold.it/350x550' alt='' />");
        $('.post-8 .content-container').animate({height: '950'});
   });  
</script>

#navone {
   padding:20px 20px;
   cursor:pointer; 
}

#title {
   width:350px;
   margin:0 auto;
}

#sliderone {
   height:50px;
   background-color:#777777;
   position: absolute;
   margin-top: -500px;
   left: 50%;
   margin-left: -175px;
}

#sliderone必须绝对定位，因此当我尝试为.post-8 .content-container设置动画时，与之相比，它会使顶部更长，而不是使底部更长以包含新内容。 我可以将负边距动画化还是将.post-8 .content-container底部动画化？

感谢您的任何帮助。 我为此付出了很多努力，只是无法完全弄清最后一个问题。

这是实际要查看的页面。

http://s416809079.onlinehome.us/wp-login登录名：stackoverflow密码：stackoverflow

Answer 1

您可能想尝试使用jQuery的一些slideDown ， slideUp或slideToggle方法。 由于您特别希望滑动容器，因此我想这可能会更符合您的需求。

根据上面的内容查看此示例： http : //jsfiddle.net/82kHV/13/

还链接到jQuery方法： http : //api.jquery.com/category/effects/sliding/

您将在CSS设置所需元素的高度。 jQuery将内插和从0到动画在此定义的值slideDown和反向slideUp 。 slideToggle将采用元素的初始状态，然后进行相反或切换。

Answer 2

我猜你有这种情况-> http://jsfiddle.net/z7M2Y/15/ 。 如果是这种情况，则您也需要为#sliderone设置height动画：

$('#sliderone').animate({height: '225px'});/*The value you calculate*/

查看此演示http://jsfiddle.net/z7M2Y/26/