Take the 2-minute tour ×

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?

share|improve this question
Looks like a Firefox bug to me :/ –  Timwi Jul 23 '12 at 21:16
Can anyone figure out a work-around? –  romkyns Jul 24 '12 at 12:00
Looks like a Firefox bug to me too. –  Matt Derrick Jul 25 '12 at 14:20

6 Answers 6

up vote 5 down vote accepted

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[0].offsetWidth; //Force reflow, required
    div.show().css('opacity', 1);


share|improve this answer
This fixed it in Firefox 12 –  ErikE Aug 2 '12 at 4:28
I was going to give 50 bounty to this answer, but SO appears to prevent anything below 200. Is this braindead or what?... –  romkyns Aug 3 '12 at 10:43
@romkyns What does it say when you select 50? I am also curious why did you end up with the workaround that has potential side effects or did you manage to neutralize them somehow? –  Esailija Aug 3 '12 at 10:44
The "start bounty" dialog has a drop-down which starts with 200. I'm not sure how I ended up choosing that answer over this one; if I could change it now I probably would... –  romkyns Aug 3 '12 at 11:00
@romkyns I think there is some feature that only allows higher bounties to be offered after initial bounty to prevent abusing the system or something. Oh well. –  Esailija Aug 3 '12 at 11:05

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:

  display: table;

Reference: jsFiddle 2

Solution 2 HTML:

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

Solution 2 CSS:

  display: inline-block;

Reference: jsFiddle 3

Solution 3 HTML:


Solution 3 CSS:

  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="links">
  <a id="a1" href="#">Link 1</a>
  <a id="a2" href="#">Link 2</a>
  <a id="a3" href="#">Link 3</a>

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

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

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



share|improve this answer
All of these have or will potentially have layout side effects, not sure about display: table though. –  Esailija Aug 3 '12 at 10:31
The 3 totally different solutions I provided work best to compliment the layout at hand (but since it's a Firefox bug there might be other valid solutions using pure CSS) which then reflects my comment of "...which will preserve your current webpage layout" . Per romkyns comments in your accepted answer (Congrats Esailija!), I've received this Bounty in error. To be fair, I will sponsor ANY Bounty question on your behalf for 100, just post the link to that question here. Cheers! –  arttronics Aug 3 '12 at 19:47
That is not necessary :). The table solution could be fine because it doesn't seem to behave like a table at all (So no side effects that I know of) yet it fixes the bug. –  Esailija Aug 3 '12 at 19:51

For what it's worth, tried it with FF15 beta and it seems to work fine, so if that's a bug in FF13/14, soon will be fixed. As a workaround, can do .fadeTo(0,1) instead of .css('opacity', 1)

share|improve this answer
Thanks for trying in FF15. The workaround you mention doesn't seem to have any effect in my Firefox 14. Got a JsFiddle, in case I did it wrong? –  romkyns Jul 26 '12 at 19:24

This is a workaround I came up with. Works on Firefox14


share|improve this answer
Usually when people post fiddles they try to put at least strategic parts of the code, if not all of it, so it can be evaluated without clicking. In any case, I don't think recreating the div is necessary, moreover it may be bad because it could be full of much more content than the simplified example. See Esailija's answer, which seems more workable. –  ErikE Aug 2 '12 at 4:30

Don't really understand why you're setting opacity to 1(or true) in this case, just use .show in your showIt and it should fix it.

function showIt(message) {

EDIT: Try it out here: http://jsfiddle.net/nqkS8/

share|improve this answer
Let the Link 3 fade out, then click Link 1 or 2, and you'll see why. –  romkyns Jul 30 '12 at 10:02
This doesn't fix it. The div retains the transitioning opacity at the time of the interruption. –  ErikE Aug 2 '12 at 4:32
function showIt(message) {
    //the old code here didnt update 'display' (i use show() for this), and treated the text as a node.
        .css('opacity', '1');

and then changing the fadeTo() into a fadeOut() with a callback that is run after the animation is finished:

$('div').fadeOut(1000, function(){
    //this function isnt run until fadeOut is finished


share|improve this answer
-1 The 1st or 2nd anchor contents fades out when the 3rd anchor is clicked on: this should not be the case. Whenever the 3rd anchor is fading to 0, clicking the 1st or 2nd anchor during that transition should immediately show that anchors content in full opacity. I'll un-downvote and upvote if you fix your Answer to include the OP objective. Cheers! –  arttronics Aug 2 '12 at 13:52

Your Answer


