JSFiddle - React, Tailwind, and code Playground

by redler

HTML

<div id="output">
    <div>Watch this:</div>
</div>

JavaScript

// simulate data returned from ajax
var data = {
    images: ['http://jsfiddle.net/img/logo.png',
             'http://jsfiddle.net/img/logo.png',
             'http://jsfiddle.net/img/logo.png'
     ]
};

for (var n in data.images) {
    $('<img>').prop('src', data.images[n]).css({
        opacity: 0
    }).appendTo('#output')
    .bind('reveal', imageLoaded);
}

function imageLoaded() {
    $(this).animate({
        opacity: 1
    }, function() {
        $(this).next().trigger('reveal');
    });
}

$('#output').find('img:first').load(function() {
    $(this).trigger('reveal');
});