JSFiddle - React, Tailwind, and code Playground

by cdeutsch

HTML

<div>Make Rocket Go Now</div>

CSS

body {
    background-color:black;
    color: white;
}

div {
    border: 2px solid black;
    padding: 5px;
    margin: 5px;
}

JavaScript

(function( $, undefined ) {

    $.effects.borderPulsate = function(o) {
        return this.queue(function() {
            var elem = $(this),
                mode = $.effects.setMode(elem, o.options.mode || 'show'),
                times = (o.options.times || 5),
                duration = o.duration ? o.duration : $.fx.speeds._default,
                isVisible = elem.is(':visible'),
                color = (o.options.color || 'rgb(255,255,0)'),
                startColor = (o.options.startColor || elem.css('border-color') || 'transparent');

            if (!isVisible) {
                elem.show();
            }

            if ((mode == 'hide' && isVisible) || (mode == 'show' && !isVisible)) {
                times--;
            }

            for (var i = 0; i < times; i++) {
                elem.animate({ 'border-color': color }, duration, o.options.easing, function() {
                    elem.css( 'border-color', startColor );
                });
            }

            elem.animate({ 'border-color': color }, duration, o.options.easing, function() {
                (o.callback && o.callback.apply(this, arguments));
            });

            elem
                .queue('fx', function() { elem.dequeue(); })
                .dequeue();
        });
    };
})(jQuery);

$('div').effect("borderPulsate", { times:3, color: 'red' }, 1000);