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.
- /* Fade In
- --------------------------------------------------*/
$.fn.fade_in= function(speed,callback){return this.each(function(e){$(this).fadeIn(speed,function(e){$.browser.msie? $(this).get(0).style.removeAttribute('filter') : '';(typeof(eval(callback)) == 'function')? eval(callback)() : '';});});}
- /* Fade Out
- --------------------------------------------------*/
$.fn.fade_in= function(speed,callback){return this.each(function(e){$(this).fadeOut(speed,function(e){$.browser.msie? $(this).get(0).style.removeAttribute('filter') : '';(typeof(eval(callback)) == 'function')? eval(callback)() : '';});});}
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!
- /* Fade Away
- --------------------------------------------------*/
$.fn.fade_in= function(speed,callback){return this.each(function(e){$(this).fadeOut(speed,function(e){$.browser.msie? $(this).get(0).style.removeAttribute('filter') : '';(typeof(eval(callback)) == 'function')? eval(callback)() : '';$(this).remove();});});}