JSFiddle - React, Tailwind, and code Playground

by xxmiz0rexx M

HTML

<div id="animateField">
<section class="box1">
<img src="http://moteco-web.jp/wp-content/uploads/2015/01/pc_diet01.png">
</section>
<section class="box2">
<img src="http://d2jvblp0e256k4.cloudfront.net/wp-content/uploads/2013/09/konkatsu_300_80.png">
</section>
</div>

CSS

#animateField{
    position:relative;
}

.box2{display:none;}

#animateField section{
    position:absolute;
    top: 0;
    left: 0;
    background:#fff;
}

JavaScript

(function ($) {
  $(function(){
    var switchInterval = 9000;
    setInterval(function() {
        $('.box2').delay(9000).fadeIn(1000);
        $('.box2').delay(9000).fadeOut(1000);
    }, switchInterval);
  });
}(jQuery));