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