0

非表示になっている要素と表示されている要素を含むdivがあります。

ここで、非表示の要素の1つを表示すると（または表示されている要素を非表示にすると）、ラッピング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のコンテンツ全体を他のコンテンツと「交換」できるようにし、新しい高さへの変更をアニメーション化する必要があります...

4

3 に答える 3

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 {幅: 400px; 高さ: 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);

  });

});

それが役に立てば幸い。

于 2012-11-03T17:53:02.870 に答える
1

編集した質問について。コンテンツを挿入したり、コンテンツを完全に変更したい場所に、新しいfiddleを作成しました。

このデモには、クリックするとさらに 2 つの Lorem Ipsum 段落がラッパー div に追加されるボタンがあります。最初に 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 になるため、display: none は使用できないことに注意してください)

#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();
      });    
});
});

それが役に立てば幸い。

編集：間違ったフィドルリンクがありました。正しく指すようになりました。

于 2012-11-03T19:01:33.883 に答える
0

jQuery には、slideDown必要なアニメーションを実行するという便利な関数があります。

これは最初の非表示を見つけてdivアニメーション化します: http://jsfiddle.net/6rhqX/4/

于 2012-11-03T17:52:44.630 に答える