How to run jQuery fadeIn() and slideDown() simultaneously?

Question

I\'ve got a div with display: none; Now I want to show it using both: fadeIn and slideDown simultaneously.

$(this).slideDown({duration: \'slow\', queue: fals         


        

Answer 1

It's possible now to use CSS3 transitions. It allows to achieve very flexible solutions.

HTML

Click me

CSS

#hidden {
    display: none; opacity: 0; height: 100px; background: red;
    transition: opacity 600ms ease-in-out 0s;
}
#hidden.opened {
    opacity: 1;
}

jQuery

$('#btn').click(function() {
    var div = $('#hidden');
    if ( ! div.is(':animated')) {
        div.slideToggle(600).toggleClass('opened');
    }
});