使用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

我想你有这种情况--> http://jsfiddle.net/z7M2Y/15/。如果是这样的话，您也需要为height for #sliderone动画。

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

检查这个演示http://jsfiddle.net/z7M2Y/26/

Answer 2

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

请参阅基于以上内容的示例：http://jsfiddle.net/82kHV/13/

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

您将在CSS中设置元素的高度。jQuery将从slideDown中的0到此定义的值进行内插和动画化，而在slideUp中则相反。slideToggle将接受元素的初始状态，并执行相反的操作或切换。