web-dev-qa-db-ja.com

display：noneからdisplay：blockにアニメーションを下にスライドしますか？

CSSを使用してdisplay：noneをdisplay：blockにアニメートして、非表示のdivが突然表示されるのではなく下にスライドする方法はありますか？

HTML：

<div id="box">
    Initial Content
    <div class="hidden">
        This is hidden content
    </div>
</div>

CSS：

#box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

そして、ここに私のスクリプトがあります：

$(document).ready(function() {
    $('#box').click(function() {
        $(this).find(".hidden").toggleClass('open');
    });
});

そして JSFiddle

javascriptjqueryhtmlcsscss-transitions
19
APAD1

はい、方法があります： http://jsfiddle.net/6C42Q/12/

表示プロパティではなく、CSS3トランジションを使用して、高さを操作します。

.hidden {
    height: 0px;
    -webkit-transition: height 0.5s linear;
       -moz-transition: height 0.5s linear;
        -ms-transition: height 0.5s linear;
         -o-transition: height 0.5s linear;
            transition: height 0.5s linear;
}

.hidden.open {
     height: 200px;
     -webkit-transition: height 0.5s linear;
        -moz-transition: height 0.5s linear;
         -ms-transition: height 0.5s linear;
          -o-transition: height 0.5s linear;
             transition: height 0.5s linear;
}

詳細： クリックしてPure CSSでdivを下にスライドしますか？

25
sinisake

すでにjQueryを使用しているため、最も簡単なのはslideDown（）を使用することです。 http://api.jquery.com/slidedown/

SlideToggle（）もあります。

その後、ブラウザ固有のすべての移行CSSを手動で行う必要はありません。

8
bhamlin

私はCSSトランジションのアイデアが好きですが、それでもまだとてもびくびくしています。遷移が非常に急激であるため役に立たない動的コンテンツのために、最大高さを非常に高い値に設定する必要がある場合があります。そのため、jQueryに戻りましたが、独自の欠点がありました。インライン要素はびくびくしています。

私はこれが私のために働くことがわかりました：

$(this).find('.p').stop().css('display','block').hide().slideDown();

停止は、以前のすべての遷移を停止します。 cssは、たとえそうでなくてもブロック要素として扱われるようにします。 hideはその要素を隠しますが、jqueryはそれをブロック要素として記憶します。最後に、slideDownは要素を下にスライドして表示します。

4
Webmaster G

どう？

$("#yourdiv").animate({height: 'toggle'});

Toggleはdivのオン/オフを切り替え、アニメーションは下から表示されるはずです。このシナリオでは、特定のCSSを「非表示」にする必要はありません。

3
Martin

また使用できます

$('#youDiv').slideDown('fast');

または、アクティブなdivが上がり、呼び出されたdivが下がることを知ることができます

$('.yourclick').click(function(e) {
       var gett = $(this).(ID);
       $('.youractiveDiv').slideUp('fast', function(){
        $('.'+gett).slideDown(300);
       });
});

そんな感じ。

0
Rodrigo Zuluaga