javascript - 使用 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登录:计算器密码:计算器

Answer 1

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

请根据以上内容查看此示例:http://jsfiddle.net/82kHV/13/

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

您将在 CSS 中设置您想要的元素高度。 jQuery 将在 slideDown 中从 0 到这个定义的值进行插值和动画处理，在 slideUp 中则相反。 slideToggle 将获取元素的初始状态并执行相反的操作或切换。