JSFiddle - React, Tailwind, and code Playground

by matthewbj

HTML

<script src="http://cdn.pc-mj.com/siteShare/jquery.colorfade.min.js"></script>
<div class="hilite">
  <p>This is DIV #1, plain ol' yellow</p>
  <a href="#!" class="refade" data-color="yellow">Restart #1</a>
</div>
<div class="hilite">
  <p>This is DIV #2, uses a blue background for restart</p>
  <a href="#!" class="refade" data-color="#0cf">Restart #2</a>
</div>
<div class="hilite">
  <p>This is DIV #3, uses an orange background for restart</p>
  <a href="#!" class="refade" data-color="orange">Restart #3</a>
</div>




<p style="margin-top:45px"><a href="https://github.com/matthewbj/jQuery-Color-Fade" style="color:#036">See the code on GitHub</a></p>

CSS

.hilite { /* this CSS for demo only */
    border:1px dotted #999;
    background-color:#f5f5f5;
    width:95%;
    margin:20px auto;
    padding:8px;
    text-align:center;
}

JavaScript

// initial function
$('.hilite').colorFade();


// Restart function
$('.refade').on('click', function(e) {
    e.preventDefault();
    $(this).parent() // MUST select the wrapping/parent element
    .colorFade('refade', {
        'fadeColor': $(this).data('color')
    });

});