JSFiddle - React, Tailwind, and code Playground
HTML
<div>
Contact us via <a id="other-contact" href="#contact-info">snail mail or phone</a>.
</div>
<div id="long"></div>
<div id="contact-info">
<span>
<h5>Contact Info</h5>
<p>Bob Cravens</p>
<p>123 South Main Street</p>
<p>Verona, Wisconsin 53593</p>
<p>1.234.567.8888</p>
</span>
</div>
CSS
#long {
height: 1000px;
}
JavaScript
(function($) {
$.fn.blink = function(options) {
var defaults = {
highlightClass: "highlight",
blinkCount: 3,
fadeDownSpeed: "slow",
fadeUpSpeed: "fast",
fadeToOpacity: 0.33
};
var options = $.extend(defaults, options);
return this.each(function() {
var obj = $(this);
var blinkCount = 0;
obj.addClass(options.highlightClass);
doBlink();
function doBlink() {
if (blinkCount < options.blinkCount) {
obj.fadeTo(options.fadeDownSpeed, options.fadeToOpacity, function() {
obj.fadeTo(options.fadeUpSpeed, 1.0, doBlink);
});
} else {
obj.removeClass(options.highlightClass);
}
blinkCount++;
}
});
};
})(jQuery);
$(document).ready(function() {
$("#other-contact").click(function() {
$("#contact-info").blink({
blinkCount: 5
});
});
});