JSFiddle - React, Tailwind, and code Playground

by jessekinsman

HTML

<div id="coverImg-707">
    <img class="imagefield imagefield-field_image" width="353" height="446" alt="" src="http://premier.us/sites/default/files/Argyle_0.png">
</div>
<img id="secImg" src="http://premier.us/sites/default/files/ActivePlanet_window.jpg" style="display: none;" />

CSS

#coverImg1 {
    width: 353px;
    overflow: hidden;
}

@-webkit-keyframes coverFade {
  0%   { opacity: 0; }
  50%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes coverFade {
  0%   { opacity: 0; }
  50%   { opacity: 1; }
  100% { opacity: 0; }
}
#secImg {
    /*animation: coverFade 2s infinite;
    -webkit-animation: coverFade 5s infinite;*/
}

JavaScript

(function() {
  var imgUrl = "/sites/default/files/ActivePlanet_window.jpg",
    nid = "707",
    duration = 1000, 
    eOut, 
    eIn, 
    origin = "http://premier.us";
  eOut = function(n) {
  	n.animate({
      	opacity: "1"
      }, duration, function(){ eIn(n) });
  }
  eIn = function(n) {
  	$("#secImg").animate({
      	opacity: "0"
      }, duration, function(){ eOut(n) });
  }
  jQuery(document).ready(function($){
    var secImg = new Image(), cont, img2;
    cont = $("#coverImg-" + nid);
    secImg.src = origin + imgUrl;
      if (cont.length > 0) {
        secImg.onload = function(e) {
          cont.css({"overflow": "hidden", "position": "relative", "height": "452px"});
          cont.find("img").css({ "position": "absolute", "left": 0, "top": 0}).attr("id", "firstImg");
            var secImgN = $("#coverImg1").append("<img src='" + secImg.src + "' id='secImg' />");
            cont.find("img")[1].css({"display": "block", "position": "absolute", "left": 0, "top": 0});
            img2 = cont.find("img")[1];
            eIn(img2);
        }
        
      }

  });
})();