jQuery: let users choose their own effects

by gabrieleromanato

HTML

<div id="test"></div>

CSS

#test {
    margin: 1em;
    width: 100px;
    height: 100px;
    background: green;
}

JavaScript

(function($) {
    $.fn.plugin = function(options) {
        options = $.extend({
            method: 'fadeOut',
            speed: 800,
            callback: function() {}
        }, options);
        
        return this.each(function() {
            var elem = $(this);
            setTimeout(function() {
                elem[options.method](options.speed, options.callback);
            }, options.speed);
        });
    };
})(jQuery);


$('#test').plugin({method: 'slideUp'});