JSFiddle - React, Tailwind, and code Playground

by shapeshifta

HTML

<div id="queue">
  <img src="http://imagefader.s3.amazonaws.com/0.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/1.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/2.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/3.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/4.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/5.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/6.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/7.jpg" />
  <img src="http://imagefader.s3.amazonaws.com/8.jpg" />
</div>

<div id="photos">

</div>

CSS

body {
    margin: 0;
    padding: 100px 0;    
}

#photos {
    position: relative;
}

#photos img {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

#photos img.shadow {
    -webkit-box-shadow: 0 0 20px rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 20px rgba(0,0,0,.5);    
    box-shadow: 0 0 20px rgba(0,0,0,.5);    
}

#queue {
    display: none;
}

JavaScript

// Bind a custom event to each image called "transition"
$("#queue img").bind("transition", function() {
    $(this)
        // Hide the image
        .hide()
        
        // Move it to the visible stage
        .appendTo("#photos")
        
        // Delay the upcoming animation by the desired value
        .delay(2500)
        
        // Slowly fade the image in
        .fadeIn("slow", function() {
            
            // Animation callback
            $(this)
                
                // Add a shadow class to this image
                .addClass("shadow")
                
            // Select the replaced image
            .siblings("img")
                
                // Remove its shadow class
                .removeClass("shadow")
                
                // Move it to the back of the image queue container
                .appendTo("#queue");
            
            // Trigger the transition event on the next image in the queue
            $("#queue img:first").trigger("transition");
            
        });   
}).first().addClass("shadow").trigger("transition"); // Fire the initial event