JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Stackoverflow: http://stackoverflow.com/q/11620385/1195891
Alternate answer by arttronics.
-->

<div id="status">Initial</div>

<div id="links">
  <a id="a1" href="#">Link 1</a>
  <a id="a2" href="#">Link 2</a>
  <a id="a3" href="#">Link 3</a>
</div>

CSS

/* The following setting fixes a Firefox v14.1 bug */
/* Specifically, this setting allows Link1 or Link2 to show quickly during animation of Link3 */
#status{
    /* Also use  'display:inline-block'  as alternate setting. */
    display: table ;
}


/*

Other important discovery:
The above 'display' attribute is not required, if for example, you just use CSS 'font-size: 28px' or larger in Firefox and without specifying font-family or font-weight (however, only font-size was tested and true).

*/

JavaScript

function showIt(message, opacity, duration) {
    $('#status').stop().html(message).animate({opacity: opacity}, duration, 'easeInExpo');
}    

jQuery('#links a').click(function(event) {
    
    switch (this.id) {

      case 'a1':
        showIt('Foo!', 1, 0);
      break;

      case 'a2':
        showIt('Bar!', 1, 0);
      break;

      case 'a3':
        showIt('Quux...', 0, 3000);
      break;

    }
    
    event.preventDefault();

});