I have opinions

jQuery plugin: Swiping Blind Effect

This plugin stemmed from a need to have an effect similar to that of a blind, how it displays the content beneath slowly from left to right in strips.

Demonstration

To view a demonstration of this plugin, click here.

How to use the plugin

You use it the same as any other plugin. Simply make sure the DOM has fully loaded, then call the function on an element ID or class:

$(document).ready(function() {
    $(".element").blindEffect({
        speed:  1000, // Each panel will animate for 1 second
        panels: 10    // Split the element into 10 different panels
    });
});

The plugin code

(function($){
    $.fn.blindEffect = function(options) {

        // Define the default settings
        var defaults = {
            speed:           1000,   // How fast the animation will last for each panel
            panels:          10,     // The number of panels to animate
            backgroundColor: "#FFF", // What background colour should the panels have?
            leftToRight:     true,   // Animate from the right to the left?
            delay:           75,     // How long to delay the animation between each panel
            opacity:         "0",    // Also animate the opacity of the panels?
        };
        
        // Merge the users options in with the settings
        // We can now refer to these options in our function via options.variable
        var options = $.extend(defaults, options);

        // Run through each of the found elements
        this.each(function() {
            // Assign $(this) to e for simplicity and speed
            var e = $(this);
            
            // Is this element already in animation?
            if ($(".panel", e).length >= 1) {
                return false;
            }

            // What is the height of this container?
            var containerHeight = parseInt(e.css("height"));
            
            // How wide will each panel need to be?
            var panelWidth = parseInt(e.css("width")) / options.panels;
            
            // Start placing the panels over the image
            for (var i = 0; i <= options.panels; i++) {
                // Prepend the panel
                e.append('<div class="panel"' +
                    ' style="' + (options.leftToRight ? 'right' : 'left') + ':' + (i * panelWidth) + 'px;' +
                        'width:' + panelWidth + 'px;' +
                        'height:' + containerHeight + 'px;' +
                        'background:' + options.backgroundColor + '"> </div>');
            }
            
            // Now that the panels are visible we start to hide the panels
            // Do we want right to left, or left to right?
            var marginLeft = 0;
            if (options.leftToRight) {
                marginLeft = panelWidth + "px";
            }
            
            // Loop over each panel
            for (var i = 0; i <= options.panels; i++) {
                $(".panel:eq(" + (options.panels - i) + ")", e)
                    // Add a delay so the animation is nice
                    .delay(i * options.delay)
                    // Animate the width and opacity
                    // Also animate marginLeft so left to right looks nice
                    .animate({
                        width:      "0",
                        opacity:    options.opacity,
                        marginLeft: marginLeft
                    },
                    // How fast we need to animate each panel
                    options.speed,
                    // Remove the panel after the animation, it serves no use
                    function() {
                        $(this).remove();
                    }
                );
            }
        });
        
        // Return jQuery object
        return this;
    }
})(jQuery);