SO - 18913914

by Arun P Johny

HTML

<div class="mobile"></div>

CSS

.mobile {
    height: 32px;
    width: 32px;
    display: inline-block;
    background-image: url(http://placehold.it/32/ff6600)
}

JavaScript

$(document).ready(function () {
    var images = ["url(http://placehold.it/32/ffff00)", "url(http://placehold.it/32/ff0000)", "url(http://placehold.it/32/000000)"];

    function render(images) {
        var img = images.shift();
        images.push(img);

        $('.mobile').delay(2000).animate({
            'opacity': '0.0'
        }, 1000, function () {
            console.log(img)
            $(this).css("background-image", img).delay(2000).animate({
                'opacity': '1.0'
            }, 1000, function () {
                render(images);
            });
        });
    }

    render(images)

});