JSFiddle - React, Tailwind, and code Playground

by redler

HTML

<div>This</div>
<div class="bar">Something else</div>
<div class="bar">This is better</div>
<div>Or this</div>
<div>Or maybe this?</div>
<div class="bar">Okay, this, then.</div>
<div class="bar">Rather, this</div>

CSS

div { padding: 10px; border: 1px solid #aaa; }
.bar { background-color: yellow; display: none; }

JavaScript

var fadeCascade = function fadeCascade(your_selector, props) {
  props = props || {};
  props.delay = props.delay || 1; // s
  props.speed = props.speed || 2000; // ms
  props.ease = props.ease || 'linear';

  $(your_selector)
    .addClass('showme') // Being a little lazy here, but it works
                        // You could work out an inspection by attached event
    .bind('showme', function() { // custom event 
      $(this).delay(props.delay * 1000).fadeIn(props.speed, props.ease, function() {
        $(this).nextAll('.showme:first').trigger('showme'); // jqueryish recursion
      });
    }).hide() // or just hide in initial css
  .first().trigger('showme'); // set the dominoes falling
};

fadeCascade('div.bar');