jquery.fadeslide.js

/*
 * jQuery fade/slide plugin to toggle/show/hide an element by fading then sliding it in/out
 * If given new content, it will automatically refit itself, and show it
 * 
 * By James Waples 2013
 * 
 * Usage:
 * 
 *  $('.selector').fadeSlide('fast', function() { ... })                // Toggle, fast, run callback anonymous function
 *  $('.selector').fadeSlide(650, 'hide')                               // Fade out, slide hide in 650 msec 
 *  $('.selector').fadeSlide('slow', 'show', function() { ... })        // Slide show and fade in in 1000 msec, run callback
 *  $('.selector').fadeSlide('slow', $('<div>Hello, world</div>'))      // Fade out, replace content, animate to new height, fade in, all slowly
 *  $('.selector').fadeSlide('$('<div>Hello, world</div>'))             // Fade out, replace content, animate to new height, fade in, default animation speed
 */

;(function($) {
    $.fn.fadeSlide = function(speed, state, newContent, callback) {
        var defaultSpeed = 600;

        switch(arguments.length) {
            case 1:
                var arg = arguments[0]; 

                if(['hide', 'show', 'refit'].indexOf(arg) !== -1) {         // State given, set speed to default
                    speed = defaultSpeed;
                    state = arg;
                } else if(typeof arg === 'object') {        // New content given. Refit container and show
                    console.log("Obj");
                    speed = defaultSpeed;
                    state = 'refit';
                    newContent = arg;
                } else if(typeof arg === 'function') {
                    speed = defaultSpeed;
                    callback = arg;
                }
            break;
            case 2: 
                var arg1 = arguments[0];
                var arg2 = arguments[1];

                if(['hide', 'show', 'refit'].indexOf(arg1) !== -1) {
                    speed = defaultSpeed;
                    state = arg1;

                    if(typeof arg2 === 'object') {
                        newContent = arg2;
                    } else if(typeof arg2 === 'function') {
                        callback = arg2;
                    }
                } else if(['slow', 'fast'].indexOf(arg1) !== -1 || typeof arg1 === 'number') {
                    speed = arg1;

                    if(typeof arg2 === 'object') {
                        newContent = arg2;
                        state = 'refit';
                    } else if(typeof arg2 === 'function') {
                        callback = arg2;
                    }
                }
            break;
            default:
                speed = defaultSpeed;
            break;
        }

        if(arguments.length === 3) {
            if(typeof newContent === 'function') {
                callback = newContent;
                newContent = undefined;
            }
        }

        // Turn jQuery speed strings into integers - required for halfSpeed
        if(speed == 'fast') {
            speed = 400;
        } else if(speed == 'slow') {
            speed = 1000;
        }

        // Half the total animation time
        var halfSpeed = parseInt(speed / 2, 10);

        return this.each(function() {
            var self = $(this);

            if(state == 'refit' && newContent) {
                var currentHeight = $(this).height();
                var newHeight = 0;

                $(this).fadeTo(halfSpeed, 0, function() {
                    $(this).html(newContent).css('height', 'auto');
                    newHeight = $(this).height();
                    $(this).height(currentHeight).animate({ height: newHeight }, halfSpeed).fadeTo(halfSpeed, 1, function() {
                        if(callback !== undefined) {
                            callback.apply(self);
                        }
                    });
                });
            } else if((state == 'hide' || !state) && self.is(':visible')) {             // Slide up
                $(this).fadeTo(halfSpeed, 0, function() {
                    $(this).slideUp(halfSpeed, function() {
                        if(callback !== undefined) {
                            callback.apply(self);
                        }
                    });
                });
            } else if(state == 'show' || (!state && self.is(':not(:visible)'))) {   // Slide down
                if(!self.is(':visible')) {
                    $(this).css('opacity', 0);
                }

                $(this).slideDown(halfSpeed, function() {
                    $(this).fadeTo(halfSpeed, 1, function() {
                        if(callback !== undefined) {
                            callback.apply(self);
                        }
                    });
                });
            }
        });
    }
})(jQuery);