JSFiddle - React, Tailwind, and code Playground

by r043v

HTML

<input type="button" id="click" value="click!" />
<img class="box" src="http://galerie.alittlemarket.com/galerie/product/4868/peinture-tableau-pour-enfant-les-elephants-1410665-les-elephants0-4d870_570x0.jpg" data-src="http://www.galerie-com.com/grand_img/0417850001193342777.jpg"/>
<img class="box" src="http://galerie.alittlemarket.com/galerie/product/4868/peinture-tableau-pour-enfant-les-elephants-1410665-les-elephants0-4d870_570x0.jpg" data-src="http://www.aruvart.com/tableaux-photos/L-elephant_360.jpg"/>
<img class="box" src="http://galerie.alittlemarket.com/galerie/product/4868/peinture-tableau-pour-enfant-les-elephants-1410665-les-elephants0-4d870_570x0.jpg" data-src="http://176.31.231.111/photo1-tableau-style-colonial-elephant_defense-d-elephant-9x7x9x8w465316.jpg"/>

CSS

.box { height:200px; float:left; clear:left; }
#click { cursor:pointer; float:left; clear:left; }

JavaScript

$.fn.animateTransition = function(callback,newsrc){
    var done = 0;
    var nb = this.length;
    function endAnim(){ if(++done === nb  && callback !== undefined) callback(); }
    return this.each(function(){
        var $t = $(this);
        var src = (newsrc === undefined || newsrc === false)?$t.data("src"):newsrc;
        if(src === undefined || src === "") return endAnim();
        var hideLoadCpt = 0, $preload, preloadtimer;
        function endHideLoad(){
            if(++hideLoadCpt === 2){
                $t.attr("src",src).animate({opacity:1},1000,'linear',endAnim);
                clearTimeout(preloadtimer); $preload.remove();
            }
        };
        $preload = $("<img/>",{src:src}).on("load",endHideLoad);
        preloadtimer = setTimeout(endHideLoad,1500);// preload timeout
        $t.animate({opacity:0},1000,'linear',endHideLoad);
    });
};

var $box = $('.box');
var $first = $box.first();

$("#click").on("click",function(){ // click!
    $first.animateTransition(function(){ // animate the first
        $box.not($first).animateTransition(function(){ // animate others
            $first.animateTransition(function(){ // reanimate the first with a new src
                alert("hey!"); // hey !
            },"http://www.atylia.com/11297-16655-thickbox/tableau-design-elephant.jpg");
        });
    });
});