JSFiddle - React, Tailwind, and code Playground

by Scoobler

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/trontastic/jquery-ui.css">
<div id="container" class="ui-corner-all">
    <div id="alwaysFlash" class="ui-corner-all">
        <h2>Warning!</h2>
        Something needs your attention....
    </div>
    <br />
    <input type="button" value="Stop Always Flash" id="stopAlwaysFlash" />
    <br /><br />
    <input type="button" value="Start Hightlight" id="startHighlightFlash" />
    <input type="button" value="Stop Highlight Flash" id="stopHighlightFlash" />
    <br /><br />
    <div id="highlightFlash" class="ui-corner-all">
        <h2>Over Here</h2>
        This is what you are trying to find.....
    </div>
</div>

CSS

#container {
    background-color: grey;
    height: 100%;
    width: 100%;
    padding: 10px;
}

#alwaysFlash {
    background-color: red;
    padding: 10px;
}

#highlightFlash {
    background-color: yellow;
    padding: 10px;
    width: 250px;
}

JavaScript

$.fn.fadeInOut = function(params)
    {
        if (params=='stop') {
            if ($(this).hasClass('hasFadeInOut')){
                clearInterval($(this).attr('processID'));
                $(this).attr('processID', '');
                $(this).removeClass('hasFadeInOut');
                return;
            }
        }
        // Define some default params, but overwrite them with passed ones:
        var params = $.extend( {
                count: 0, 
                occurrences: 0,
                fadeIn: 200,
                fadeOut: 600,
                delay: 400,
                pause: 2000
            }, params);
        
        return this.each(function()
        {
            // Store the object:
            var obj = $(this);
            // Store the interval function:
            var process;
            // Only add function if not already running:
            if (!obj.hasClass('hasFadeInOut')) {
                // Add a class to the item:
                obj.addClass('hasFadeInOut');
                // Store the interval function:
                process = setInterval(function() {
                    // Fade the object out:
                    obj.animate({ opacity: 0.2 }, params.fadeOut )
                       // Wait before fading in:
                       .delay(params.delay)
                       // Fade object back in:
                       .animate({ opacity: 1 }, params.fadeIn, function(){ 
                            // Check if running constantly:
                            if (params.occurrences!=0) {
                                // Increment the no of times this has happened:
                                params.count++;
                                // Check if effect has run X times:
                                if(params.count>=params.occurrences) {
                                    // Clear the interval function:
                                    clearInterval(process);
                                    //...