Blur targets

blurTargets.js

$(document).ready( function() {

    // This is the proper way to use blur.js. Too bad it only works on one element...

    $('.b1').blurjs({   // Area to be blurred.
        source: '.b1',  // Target photo.
        radius: 15      // In THIS CASE... they happen to be the same for cleaner markup.
    });

    /**
     * The following functions/calls are a total hack. This is not a clean way to use blur.js at all.
     * There are two main problems:
     *
     * 1. It requires the setting of a specific list of elements to be blurred. That sucks.
     * It SHOULD blur by .backslide:nth-of-type() but I can't get that to work. 
     * 
     * 2. This should not be using timeout functions. I hate that. However, I can't figure out another 
     * way to get it to blur more than one photo. Any other way I've tried blocks the blurring of '.b1' or 
     * whatever element you blur first, the correct way (see above).
     */

    function hack(name, speed, size){
        function target(){
            $(name).blurjs({   // Area 
                source: name,  // Target
                radius: size
            });
        }
        setTimeout(target, speed)   
    }

    hack('.b0', 500 * 1, 15);
    hack('.b2', 500 * 2, 15);
    hack('.b3', 500 * 3, 15);
    hack('.b4', 500 * 4, 15);
    hack('.b5', 500 * 5, 15);
    hack('.b6', 500 * 6, 15);
    hack('.b7', 500 * 7, 15);
    hack('.b8', 500 * 8, 15);
    hack('.b9', 500 * 9, 15);
    hack('.b10', 500 * 10, 15);
    hack('.b11', 500 * 11, 15);
    hack('.b12', 500 * 12, 15);
});