JSFiddle - React, Tailwind, and code Playground

by rwaldron

HTML

<p>Click me!</p>
<div>Absolute positioning: <span style="position:absolute;" class="feedback"></span></div>
<div>Static positioning: <span style="position:static;" class="feedback"></span></div>

CSS

.feedback {display: none; margin-left: 20px;}

JavaScript

;(function (jQuery) {

    
  jQuery.fn.extend({

    hideALT: function( speed, easing, callback ) {
        if ( speed || speed === 0 ) {
            return this.animate( genFx("hide", 3), speed, easing, callback);

        } else {
            for ( var i = 0, j = this.length; i < j; i++ ) {

              var display = jQuery.css( this[i], "display" ), 
                  old = jQuery.data( this[i], "olddisplay" );

              if ( !old && display !== "none" ) {
                jQuery.data( this[i], "olddisplay", display );
              }
            }

            // Set the display of the elements in a second loop
            // to avoid the constant reflow
            for ( i = 0; i < j; i++ ) {
                this[i].style.display = "none";
            }

            return this;
        }
    },
  });

})(jQuery);


$(function(){

    var feedback = $(".feedback");

    $("p").click(function(){
        save();
    });

    function save(){
        //stop all running animations
        feedback.text('Saving...').fadeIn(function(){

            feedback.text('Saved!').hideALT();
        });
    }
});