问题

Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?

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

And here is my script:

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

And a JSFiddle

回答1:

Yes, there is a way: http://jsfiddle.net/6C42Q/12/

By using CSS3 transitions, and manipulate height, rather than display property:

.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;
}

More here: Slide down div on click Pure CSS?

回答2:

Since you're already using jQuery, the simplest thing is just to use slideDown(). http://api.jquery.com/slidedown/

There's also slideToggle().

Then you don't need to manually do all the browser-specific transition css.

回答3:

What about

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

Toggle will switch your div on/off, and the animate should make it appear from below. In this scenario, you don't need the specific CSS to "hide" it.

回答4:

I like the idea of CSS transitions, but it's still very jumpy. Sometimes the max-height has to be set to a very high number because of dynamic content which renders the transition useless as it's very jumpy. So, I went back to jQuery, but it had its own faults. inline elements are jumpy.

I found this to work for me:

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

The stop stops all previous transitions. The css makes sure it's treated as a block element even if it's not. The hide hides that element, but jquery will remember it as a block element. and finally the slideDown shows the element by sliding it down.

回答5:

You can use also

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

or you can tell that the active div goes up then the called one goes down

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

Something like that.

来源：https://stackoverflow.com/questions/24314687/slide-down-animation-from-displaynone-to-displayblock

标签

javascript