Content is invisible for half a second when aborting jQuery.fadeTo in Firefox only

Question

Here's the JsFiddle: http://jsfiddle.net/d6mmZ/7/

Clicking links 1 and 2 updates the text instantly. Clicking link 3 starts a slow fade-out. If I click link 1 or 2 during this time, the animation is supposed to be aborted and the new text shown instantly.

In Chrome, that's exactly what happens. In Firefox 13/14, there is a half second pause during which the content is completely invisible. If I let the fade complete, links 1 and 2 work instantly.

Is this a Firefox/jQuery bug or am I mis-using fade? If a bug, can I work around this somehow?

Answer 1

Simply hiding, forcing a reflow and then showing it again did the trick for me at least in firefox 13:

function showIt(message) {
    var div = $("div");
    div.empty().append(message).stop().hide();
    div[0].offsetWidth; //Force reflow, required
    div.show().css('opacity', 1);
}

http://jsfiddle.net/d6mmZ/28/

Answer 2

This is a Firefox (v14 tested) bug for sure.

However, the good news is that I've discovered THREE easy solutions you can choose from, which will preserve your current webpage layout.

If that's not enough, I've also brought to the table a bonus jsFiddle with alternate markup for single .click() functionality too.

---

Reference: jsFiddle 1

Solution 1 HTML:

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

Solution 1 CSS:

#status{
  display: table;
}

---

Reference: jsFiddle 2

Solution 2 HTML:

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

Solution 2 CSS:

#status{
  display: inline-block;
}

---

Reference: jsFiddle 3

Solution 3 HTML:

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

Solution 3 CSS:

#status{
  font-size: 28px;
}

---

And if you just want to use just 1 single jQuery Click Event Listener instead of using a whole mess of them, you can consider this Bonus Version that also uses the same bug-fix CSS as above:

Reference: jsFiddle Single Click

Solution Single Click HTML:

<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>

Solution Single Click jQuery:

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();

});