How to Fix jQuery's Fade In/Out Functions for Internet Explorer

How to Fix jQuery's Fade In/Out Functions for Internet Explorer

I feel like the world sadly has to keep picking up the slack for Microsoft. Another example is how jQuery's Fade In/Out functions don't look right in Internet Explorer. Weird, right? While we can't send IE to the chopping block, we can create a function to fix this issue.

Custom jQuery Fade In/Out Function

It's too bad the world can't just completely write off Internet Explorer (and Microsoft altogether for that matter). *Sigh*. So Internet Explorer uses an individual style attribute called filter which it uses to deliver "improved font display quality over traditional forms of font smoothing or anti-aliasing." In other words, this is Microsoft saying "we originally created really poor font display for our browser and this is our half-assed way of fixing it."

What we need to do is create a custom fadeIn and fadeOut function which will check if the visitor is using IE and, if they are, remove the filter attribute when performing the fade in/out. Don't worry, it's not as hard as it sounds.

Fixing the Fade In
  1. /* Fade In
  2. --------------------------------------------------*/
  3. $.fn.fade_in= function(speed,callback){
  4.  
  5. return this.each(function(e){
  6.  
  7. $(this).fadeIn(speed,function(e){
  8.  
  9. $.browser.msie? $(this).get(0).style.removeAttribute('filter') : '';
  10. (typeof(eval(callback)) == 'function')? eval(callback)() : '';
  11.  
  12. });
  13.  
  14. });
  15.  
  16. }
Fixing the Fade Out
  1. /* Fade Out
  2. --------------------------------------------------*/
  3. $.fn.fade_in= function(speed,callback){
  4.  
  5. return this.each(function(e){
  6.  
  7. $(this).fadeOut(speed,function(e){
  8.  
  9. $.browser.msie? $(this).get(0).style.removeAttribute('filter') : '';
  10. (typeof(eval(callback)) == 'function')? eval(callback)() : '';
  11.  
  12. });
  13.  
  14. });
  15.  
  16. }

By implementing a custom jQuery function, we can use fadeIn and fadeOut just the same, excepting with our own respective fade_in and fade_out functions. So replace all of your $('#my_element').fadeIn() with our new function $('#my_element').fade_in().

Create a Fade Away jQuery Function

Ever want have the need to remove an element, but want to do it with a slick animation? Let's use our newly created fade_out jQuery function and modify it to remove the element when it's finished fading out!

Adding a Fade Away Function
  1. /* Fade Away
  2. --------------------------------------------------*/
  3. $.fn.fade_in= function(speed,callback){
  4.  
  5. return this.each(function(e){
  6.  
  7. $(this).fadeOut(speed,function(e){
  8.  
  9. $.browser.msie? $(this).get(0).style.removeAttribute('filter') : '';
  10. (typeof(eval(callback)) == 'function')? eval(callback)() : '';
  11.  
  12. $(this).remove();
  13.  
  14. });
  15.  
  16. });
  17.  
  18. }

Tags

Add Comment

Leave a Comment or Reply
Fuel the conversation with your thoughts using the form below. Email is not made public.
× Processing...

Please Wait while your Comment is being Processed.

*
*
*

Comments 4 Total Responses

Dexter
Comment Rating: 0

But... does the original jQuery method fadeOut / fadeIn still use the "opacity" or similar CSS 3 attribute?
I want something that will work correctly even for browsers not aware of CSS 3...that is, for VERY old browsers...