jQuery Promises and UI

Not too proud of this one...

by Steven Senkus

HTML

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<div id="sky" class="hidden">
    <img width="300" height="300" style="margin: 50px;" src="http://media-cache-ak0.pinimg.com/originals/66/f9/c7/66f9c78ac8658272453661846b77a4e5.jpg" />
</div>

CSS

body {
    background-color: #000;
}
.hidden {
    display: none;
}
#sky {
    background-color: #000;
    opacity: 0;
    height: 400px;
    width: 400px;
}

JavaScript

$(document).ready(function () {
    function cycleBgImg(imgSrc) {
        var bg_image = new Image;
        var deferred = new $.Deferred();
        bg_image.onload = function () {
            deferred.notify();
            $('#sky').css({
                'display': 'block',
                    'opacity': 0
            });
            $('#sky').css('background-image', 'url(' + this.src + ')');
            setTimeout(function () {
                $('#sky').animate({
                    opacity: 1
                }, 1000, 'linear', function () {
                    deferred.resolve();
                });
            }, 100);
        };
        bg_image.src = imgSrc;
        return deferred.promise();
    }


    $.when(cycleBgImg('http://upload.wikimedia.org/wikipedia/en/b/b0/Animal_collective_merriweather.jpg')).then(function () {
        var x;
        function getval(a) { return a;}
        for (var i = 0; i < 3; i++) {
         x = i;
        $('#sky img').effect({
            effect: 'shake',
            duration: (320 * getval(x)),
            complete: function () {
                $(this).effect('explode', 200 + (i * 100), function() {
                    //$('#sky').css('opacity', '0.9')      
                    $(this).fadeIn(1000, function() {
                    $('#sky').css('opacity', '1')      
                    })
                });
                
            }
        });
            
            
            
        }

    });
});