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

Here is my solution, you can use it as a jQuery plugin.

(function($) {
    'use strict';
    // Sort us out with the options parameters
    var getAnimOpts = function (a, b, c) {
            if (!a) { return {duration: 'normal'}; }
            if (!!c) { return {duration: a, easing: b, complete: c}; }
            if (!!b) { return {duration: a, complete: b}; }
            if (typeof a === 'object') { return a; }
            return { duration: a };
        },
        getUnqueuedOpts = function (opts) {
            return {
                queue: false,
                duration: opts.duration,
                easing: opts.easing
            };
        };
    // Declare our new effects
    $.fn.showDown = function (a, b, c) {
        var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts);
        $(this).hide().css('opacity', 0).slideDown(slideOpts).animate({ opacity: 1 }, fadeOpts);
    };
    $.fn.hideUp = function (a, b, c) {
        var slideOpts = getAnimOpts(a, b, c), fadeOpts = getUnqueuedOpts(slideOpts);
        $(this).show().css('opacity', 1).slideUp(slideOpts).animate({ opacity: 0 }, fadeOpts);
    };
}(jQuery));

Now you can use it the same way you would use jQuery’s .fadeIn (or fadeOut) effect.

// Show
$('.alert').showDown('slow');
// Hide
$('.alert').hideUp('fast', function() {
    // Animation complete: '.alert' is now hidden
});

This will resize our element’s height with a fading effect.

It was originally posted on my blog.