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/

现在我想在新元素出现时“平滑”包装。

编辑：也许我过度使用了我的问题而忘记提及一些事情......

我不想为内部div设置动画，我想在其中的某些内容被删除/添加/隐藏/显示时“自动”地设置包装器。

例如，我希望能够将div的整个内容与其他内容“交换”，并且希望将对新高度的更改设置为动画...

Answer 1

我用一个简单的演示制作了一个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 {width：400px;身高：200px;背景颜色：橙色; display：none;}

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);

  });

});

希望它有所帮助。

Answer 2

关于您编辑过的问题。在您想要完全插入内容或更改内容的位置，我创建了一个新的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颜色使动画可见，并且可见性：隐藏为临时容器。注意你不能使用display：none，因为在测量高度时你会得到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 3

jQuery有一个名为slideDown的便捷功能，可以完成你想要的动画。

这会找到第一个隐藏的div并将其设置为动画：http://jsfiddle.net/6rhqX/4/

显示/隐藏/添加元素时包装器的CSS转换

3 个答案: