顯示/隱藏/添加元素時用於包裝的CSS轉換

Question

我有一個div，其中包含一些隱藏的元素以及一些可見的元素。

現在，當我顯示一個隱藏的元素（或隱藏一個可見的），包裝div的高度改變。我也可以爲div添加新的元素。

例子：

<div class="wrapper"> 
    <div id="inner1">Hallo1</div> 
    <div id="inner2">Hallo2</div> 
    <div id="inner3">Hallo3</div> 
</div> 

現在我想動畫包裝DIV的高度變化。

我與jQuery效果和CSS3過渡以防萬一打不過我能得到它的工作..

編輯：這裏提琴例如我有什麼：

http://jsfiddle.net/6rhqX/2/

現在我想在出現新元素時「平滑」包裝。

編輯：也許我oversimplyfied我的，我的問題，卻忘了提一些東西..

我不想動畫內的div，我想對animte包裝「全自動」只要有東西在裏面是刪除/添加/隱藏/顯示。

例如，我希望能夠以「交換」與其他內容div的全部內容，並希望有變化，以新的高度動畫...

Answer 1

關於你編輯的問題。如果你想插入內容或完全改變內容，我做了一個新的fiddle。

在這個演示中，你有一個按鈕，當你點擊它時，會向包裝div添加兩個更多的Lorem Ipsum段落。它的做法是首先將div動畫到適當的高度，然後添加內容。您可以多次單擊該按鈕，每次添加演示內容的新塊。

HTML標記：

<a href="#" id="change_content">Add content</a> 
<div id="wrapper"> 
    <div class="content_box"> 
     <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do ei 
     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 
     quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
     consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 
     cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 
     proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> 
    </div> 
</div> 
<div id="temp_content"></div><!-- Container for temporary content --> 

CSS（這裏只是用來BG顏色，使動畫可見的（東西這裏，應該注意的是，我已經使用的臨時容器與可見性設置爲隱藏的內容。）和visibility：hidden的臨時容器，需要注意的是你不能使用顯示：無，因爲測量高度時，你會得到0）

#wrapper {background-color: orange;} 

.content_box {width: 400px; background-color: green;} 

#temp_content {width: 400px; visibility: hidden;} 

的jQuery（我評論的代碼在這裏）

$(document).ready(function() { 

$('#change_content').click(function(e) { 
    /*Some demo content here. Two new paragraphs wrapped in the div with content_box 
     class. If it wasn't wrapped in the content_box class. In order to get correct 
     height you should have temporary container width same as desired target 
     container width so the content fills up properly.*/ 
    var new_content = '<div class="content_box"><p>Lorem ipsum dolor sit amet, 
    consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore 
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
    voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
    occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id 
    est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do 
    eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
    veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 
    consequat. 
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
    culpa qui officia deserunt mollit anim id est laborum.</p></div>'; 

    //insert the new content inside the temporary container. 
    $('#temp_content').html(new_content); 
    //calculate the temporary container height 
    var new_content_height = $('#temp_content').height(); 
    //calculate current content height 
    var existing_content_height = $('#wrapper').height(); 
    //add two heights together 
    var target_height = new_content_height + existing_content_height + 'px';   
    $('#wrapper').animate({ 
     height: target_height 
     }, 1000, function() { 
     //after the animation is over insert the content to the wrapper 
     $('#wrapper').append(new_content); 
     //its not obligatory but lets empty the temporary container 
     $('#temp_content').empty(); 
     });  
}); 
}); 

希望它有幫助。

編輯：有錯誤的小提琴鏈接。現在它指向正確。

Answer 2

jQuery有稱爲方便的功能slideDown這是做你想要的動畫。

此發現的第一個隱藏div和動畫下來：http://jsfiddle.net/6rhqX/4/

Answer 3

我已經做了的jsfiddle here用一個簡單的演示。它利用了jQuery的slideUp（）和slideDown（）函數。按鏈接將顯示/隱藏div的，並適當地移動包裝div，或者你可以添加和元素，附加和向下滑動，連同包裝div。

HTML標記我在演示中使用：

<ul class="buttons"> 
    <li><a href="#first_box">First box</a></li> 
    <li><a href="#second_box">Second box</a></li> 
    <li><a href="#third_box">Third box</a></li> 
</ul> 
<a href="#" id="add_element">Add Element</a> 
<div id="wrapper"> 
    <div id="first_box"> 
     Got some cool content here. 
    </div> 
    <div id="second_box"> 
     Also some cool content. 
    </div> 
    <div id="third_box"> 
     And a third box. 
    </div> 
</div> 

的CSS：

#wrapper {background-color: black;} 

#first_box {width: 400px; height: 300px; background-color: green;} 

#second_box {width: 400px; height: 300px; background-color: red; display: none;} 

#third_box {width: 400px; height: 300px; background-color: blue; display: none;} 

.new_element {寬度：400像素; height：200px;背景顏色：橙色;顯示：無;}

JQuery的：

$(document).ready(function() { 

    $('.buttons a').click(function(e) { 
    e.preventDefault(); 
    var target_box = $(this).attr('href'); // get the target box id 
    //check if box is currently visible or hidden 
    if($(target_box).is(':hidden')) { 
     //if div is hidden slide it down (show it) and wrapper slides down with it 
     $(target_box).slideDown(1000);  
    } else { 
     //if div is visible hide it by sliding it up, wrapper slides up with it 
     $(target_box).slideUp(1000); 
    } 
    });  

    $('#add_element').click(function(e) { 
    var new_div = $('<div class="new_element">New element</div>'); 
    $('#wrapper').append(new_div); 

    }); 

}); 

希望它能幫助。