使用JQuery來動畫Div的大小

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

#sliderone必須絕對定位，所以當我嘗試動畫.post-8 .content-container它使上邊長的比較，而不是使底邊長爲包含新的內容。我可以動畫縮小負邊距還是動畫底部的.post-8 .content-container？

謝謝你的幫助。我在這方面努力工作，只是無法弄清楚最後一個問題。

下面是實際看到的頁面。

http://s416809079.onlinehome.us/wp-login 登錄：計算器密碼：計算器

來源

2013-12-18 nate howard

這裏看看http://www.w3schools.com/jquery/jquery_animate.asp – user2167382

什麼關於使用jQuery庫中的'slideDown'？ –

您正在使用jQuery的類選擇器，但這些類不存在於html中。你的選擇器不會選擇任何東西，因此不會動畫。 – Bic

我想你有這種情況 - >http://jsfiddle.net/z7M2Y/15/。如果是這樣的話，你需要動畫太height爲#sliderone：

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

檢查這個演示http://jsfiddle.net/z7M2Y/26/

來源

2013-12-18 17:25:35 DaniP

這是接近工作，然而（.post-8 .content容器）實際上不包含#sliderone，所以我使用負頂部邊距將其放入它的前面。所以我不需要增大#sliderone的大小，但改變負邊距以在底部創建更多空間。然而 - $（'＃sliderone'）。animate（{margin-top：'-225px'}）; 似乎不是有效的。 –

@natehoward我試圖幫助...複製整個HTML在一個小提琴... – DaniP

@natehoward檢查此與marginTop工作http://jsfiddle.net/z7M2Y/40/ – DaniP

你可能想使用一些jQuery的slideDown，slideUp或slideToggle的方法試一試。既然你是專門尋找滑動容器，我想這可能是更具體到你的需求。

見基於你有什麼上面這個例子：http://jsfiddle.net/82kHV/13/

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

你將設置你在CSS需要的元素的高度。 jQuery將插入並動畫從0到slideDown中的這個定義的值，而slideUp的相反。 slideToggle將採取元素的初始狀態並做相反的操作或切換。

來源

2013-12-18 17:13:42

我意識到的問題是（.post-8 .content-container）實際上不包含#sliderone。我正在使用負頂部邊距將其放在它的前面。 –

我不確定我是否完全理解，但無論'content-container'的位置如何，'slideToggle'方法都應該是一樣的。 –

http://jsfiddle.net/82kHV/16/ –

使用JQuery來動畫Div的大小

回答

相關問題