Geek Answers Handbook

Problem with jQuery fade in / out in Firefox

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

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

Hmm check out my website:

http://www.crtaci.info/

in the upper right position I have a search box. When you move the mouse there appears a small text that says:

Prerag attacked

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

Any sugestions?

here is the function that does the 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(); }); });
+4
source share
5 answers

I see what you are talking about. On my machine (Vista Business 32-bit, FF3.5) it seems that the yellowness present during the decay is due to the ClearType combination trying to work on alpha mixed text and that you fade the text through a bluish background. I know white + blue! = Yellow, but no matter what FF does under the hood when rendering transparent text, in combination with your OS, as well as a basilion of other things makes it yellow.

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

I’m afraid you won’t be able to control this with JavaScript code, but I might try what others suggested: keep the text visible, but link it to blue, which matches the background to white.

+5
source

There are several fixes that should take place - this is an IE-only error, which greatly affects IE6 almost not in IE7 and a bit in IE8.

This site had good recommendations for resolving them: jQuery HowTo - Blogspot

Its essence is that: - Add the appropriate background color to the element that receives the fading effect - Remove the filter attribute after the element has disappeared.

0
source

This is actually a Firefox (Cairo) bug https://bugzilla.mozilla.org/show_bug.cgi?id=363861 , reported 3 1/2 years ago ... Still not fixed.

Makes any text with opacity not equal to 1 or 0, gets strange color ghosting, not only with jQuery or JavaScript, but also with CSS. However, this is not so noticeable. Seems worse with values ​​close to 1 (.9999)

0
source

I came across this on FF 3.5.9 when the dropdown menus disappeared. I just added a background color to the parent container to fix it.

0
source

Setting the background color for the actual text element will fix this.

If you have an image behind the text, create a background image for the text element that matches the far background.

0
source

More articles:


All Articles