Problem with jQuery's fade in/out in Firefox

Question

I already asked here with no luck, but feel free to read it:

http://groups.google.com/group/jquery-en/browse_thread/thread/fdf7a584b30d4bb9

Hmm check out my site:

http://www.crtaci.info/

on top-right position i have search field. When you move your mouse over there small text shows up that says:

Napredna pretraga

Now, for some reason those letters change color to like yellow for very short period of time in ff 3.5 and to some strange color in safari 4.0.2 for win. In ie8, opera and chrome it works just the way it should, white letters stay white during the animation.

Any sugestions?

here is function that do this job ;)

$('#header_search').hover(function() {
 $('#naprednaPretraga').stop({clearQueue:true}).show().animate({"opacity" : 1},500);
}, function(){
 $('#naprednaPretraga').stop({clearQueue:true}).animate({"opacity" : 0},500,function() {
  $('#naprednaPretraga').hide();
 });
});

Answer 1

I can see what you're talking about. On my machine (Vista Business 32-bit, FF3.5), it appears as though the yellowishness that is present during the fade is due to a combination of the ClearType trying to act on alpha-blended text and that you're fading white text through a blueish background. I know white + blue != yellow, but whatever FF does under the hood when rendering the transparent text, coupled with your OS, and a bazillion other things makes it seem yellow.

When I turn ClearType off on my machine, the yellowish seems to disappear, or is at least far less noticeable than with it on.

I'm afraid that you won't be able to control that with JavaScript code, but I would perhaps try what others have suggested: keep the text visible but fade it in from a blue that matches the background to white.