jQuery fadeIn() & fadeOut(): Problems in Internet Explorer
- Share /
- jQuery / 10.18.08 / 10 Comments / /
On January 20th, 2010 I upgraded the demo for this to use jQuery 1.4 and the fadeIn() and fadeOut() issues seem to be fixed in IE7 and IE8.
I’ve noticed some issues with my jQuery work. When I use the .fadeIn() or .fadeOut() methods I see ugly pixelated text in Internet Explorer.
Preview / Sample / Demonstration
jQuery Fading Problems in Internet Explorer
How it is fixed
Set a background color with CSS on the element that is fading in or out.
An alternative method
If you’re having problems with the method above give this jQuery plugin a try.
Thanks to Bill: I can’t recall where I got this from but if you google it you’ll find it. This is how to fix the problem (not tested in jquery 1.4).
Use this function. Change your ‘fadeOut’ to ‘customFadeOut’. A sample of Bill’s setup can also be seen on the demo page.
(function($) { $.fn.customFadeIn = function(speed, callback) { $(this).fadeIn(speed, function() { if(!$.support.opacity) $(this).get(0).style.removeAttribute('filter'); if(callback != undefined) callback(); }); }; $.fn.customFadeOut = function(speed, callback) { $(this).fadeOut(speed, function() { if(!$.support.opacity) $(this).get(0).style.removeAttribute('filter'); if(callback != undefined) callback(); }); }; $.fn.customFadeTo = function(speed,to,callback) { return this.animate({opacity: to}, speed, function() { if (to == 1 && jQuery.browser.msie) this.style.removeAttribute('filter'); if (jQuery.isFunction(callback)) callback(); }); }; })(jQuery);
Resources
- jQuery in Action: If you find yourself frequently using jQuery in your projects I would highly recommend checking out this book. I’ve read this and also Learning jQuery 1.3 and have found jQuery in Action to be clearer, more straight forward and more powerful.
- jQuery IE Fade Test
- jQuery Reference Guide
jQuery fadeIn() & fadeOut() - Bug no Internet Explorer » Pinceladas da Web - Reflexões sobre XHTML, CSS, PHP e WebStandards / 11.4.08 / 4:01 AM
[...] mas acabei encontrado uma solução muito interessante no site de Kevin Leary que consiste simplesmente em adicionar uma cor de fundo ao elemento que será aplicado o [...]
John / 10.11.09 / 1:43 PM
Saved me a lot of time on this one – thanks!
Alexandre Oliveira / 11.12.09 / 7:56 PM
Ohhh my! I can't believe this…
IE's always surprising me.
@dangerdave / 12.7.09 / 10:20 PM
This seemed promising, but I tried your demo in IE8 (on Win7) and the "pretty" fade in looks just as broken and pixellated as the not-pretty fade-in. Alas.
kevinlearynet / 12.7.09 / 11:07 PM
Hey Dave,
That's too bad — and I've heard such great things about 7. I have a copy of XP and the issue seems to be fixed for both examples on IE8 (even the bad). Until I get a copy of Windows 7 loaded up on VMware I don't know how to help on this one. In the mean time if you or anyone else find's the cause/solution please let everyone know.
stefan / 1.4.10 / 11:41 AM
thanks for this! It was giving me a headache for a fair few hours..
Cheeeeeeeeeeeers!
fresh / 1.16.10 / 2:35 AM
Kevin, thanks for sharing! But if I can't set the bg color, because I have a complex background underneath on the body element? If I set the bg color, it will look really ugly on non-flat-color bg. You you know any other solution? Even a hard one? :-)
kevinlearynet / 1.19.10 / 4:23 PM
Can't say I know a fix for that fresh, even a tough one. You may want to consider digging around stackoverflow.com for some similar scenarios:
<a href="http://stackoverflow.com/search?q=jquery+fadeIn+IE">Stackoverflow.com search for "jQuery fadeIn IE"
If you can't find anything I'd post a new entry. Stackoverflow has been incredibly helpful for me, especially with advanced jQuery scenarios like this.
Best of luck and thanks for posting!
bill / 1.20.10 / 7:24 AM
I can't recall where I got this from but if you google it you'll find it. This is how to fix the problem (not tested in jquery 1.4).
Use this function. Change your 'fadeOut' to 'customFadeOut'.
(function($) {
$.fn.customFadeIn = function(speed, callback) {
$(this).fadeIn(speed, function() {
if(!$.support.opacity)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.customFadeOut = function(speed, callback) {
$(this).fadeOut(speed, function() {
if(!$.support.opacity)
$(this).get(0).style.removeAttribute('filter');
if(callback != undefined)
callback();
});
};
$.fn.customFadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, speed, function() {
if (to == 1 && jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};
})(jQuery);
kevinlearynet / 1.20.10 / 1:04 PM
Thanks for this bill, I've added it to the post and placed the code in a source viewer.