Javascript 使用JQuery设置div大小的动画

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

这是一个可点击的标题
$（'#navone'）。单击（函数（）{
$（'#title'）.html（“”）；
$（'.post-8.content-container'）。动画（{height:'950'}）；
});  
#纳沃内{
填充：20px 20px；
光标：指针；
}
#头衔{
宽度：350px；
保证金：0自动；
}
#幻灯片{
高度：50px；
背景色：#777777；
位置：绝对位置；
利润上限：-500px；
左：50%；
左边距：-175px；
}

#sliderone

必须绝对定位，因此当我尝试设置

.post-8.content container

动画时，相比之下，它会使顶部更长，而不是使底部更长，以容纳新内容。我可以将负边距设置为更小的动画，还是将

.post-8.content容器的底部设置为更小的动画

谢谢你的帮助。我在这方面做得很努力，只是不能很好地解决最后一个问题

这是要查看的实际页面


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

根据以上内容，请参见此示例：

还提供了jQuery方法的链接：

您将在
CSS
中设置所需的元素高度。jQuery将在
slideDown
中从0插值并设置动画，在
slideUp
中从0插值并设置动画<代码>滑动切换

将获取元素的初始状态，并执行相反的操作或切换。

我猜您遇到了这种情况-->。如果是这种情况，您也需要为

#滑块的
高度设置动画：

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

查看此演示
看看这里，使用jQuery库中的
向下滑动
怎么样？您在jQuery中使用了一个类选择器，但这些类在html中不存在。您的选择器不会拾取任何内容，因此不会设置任何动画。html中的“$（'.post-8.content container'）”在哪里？抱歉。我弄糊涂了。（.post-8.content container）是包含WordPress帖子的容器。这几乎可以正常工作，但是（.post-8.content container）实际上不包含#sliderone，因此我使用负上边距将其放置在它前面。因此，我不需要将#sliderone变大，但需要更改负边距以在底部创建更多空间。但是-$（'#sliderone'）。动画（{margin top:'-225px'}）；似乎无效。谢谢。我意识到了这一点，我想我把它弄糊涂了。我创建了一个登录名供您自己查看。我把它加在上面了。谢谢@natehoward我怎么才能进入你说的地方？？？是一个混乱的网页链接。用margintop检查小提琴工作尝试使用margintop而不是margintop。margintop示例工作得非常好！非常感谢你！另一个快速问题-我需要添加什么才能在再次单击时使其反转？我意识到的问题是（.post-8.content container）实际上不包含#sliderone。我正在使用负上边距将其放在它前面。我不确定我是否完全理解，但无论
内容容器的位置如何，
滑动切换
方法都应该是一样的。