Created
March 15, 2013 20:55
-
-
Save bennadel/5173040 to your computer and use it in GitHub Desktop.
Removing Inline Opacity Filters After Fade-In / Fade-Out Transitions In IE8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <!--[if lt IE 9]> | |
| <html class="lt-ie9"> | |
| <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <html> | |
| <!--<![endif]--> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title> | |
| Removing Inline Filters After FadeIn / FadeOut In IE | |
| </title> | |
| <style type="text/css"> | |
| ul li { | |
| filter: alpha( opacity = 0 ) ; | |
| opacity: 0 ; | |
| position: relative ; | |
| zoom: 1 ; | |
| } | |
| ul.visible li { | |
| filter: alpha( opacity = 100 ) ; | |
| opacity: 1 ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1> | |
| Removing Inline Filters After FadeIn / FadeOut In IE | |
| </h1> | |
| <ul class="list visible"> | |
| <li> | |
| Thing One | |
| </li> | |
| <li> | |
| Thing Two | |
| </li> | |
| </ul> | |
| <p> | |
| <a href="#" class="toggle">Toggle</a> - | |
| <a href="#" class="fader">Fade Out</a> | |
| </p> | |
| <!-- Load jQuery from the CDN. --> | |
| <script | |
| type="text/javascript" | |
| src="//code.jquery.com/jquery-1.9.1.min.js"> | |
| </script> | |
| <script type="text/javascript"> | |
| // Hook up the toggle to add/remove the visible class. | |
| $( "a.toggle" ).click( | |
| function( event ) { | |
| $( "ul" ).toggleClass( "visible" ); | |
| } | |
| ); | |
| // Hook up the fader to fade-out / fade-in the list items. | |
| $( "a.fader" ).click( | |
| function( event ) { | |
| $( "ul li" ) | |
| .fadeOut( 1000 ) | |
| .fadeIn( 1000, handleFade ) // Clean up CSS. | |
| ; | |
| } | |
| ); | |
| // I handle the clean-up for the fade-in action. This will | |
| // execute for EACH item in the transitioning collection. | |
| // When this executes, THIS will refere to the DOM element | |
| // being faded-in. | |
| function handleFade() { | |
| // Clear any inline CSS properties that may be left over | |
| // from the fade-in / fade-out transition. | |
| $( this ).css({ | |
| display: "", | |
| opacity: "", | |
| filter: "", | |
| zoom: "" | |
| }); | |
| // If we are currently working with IE7 / IE8, then | |
| // clearing the inline CSS won't actually be enough. We | |
| // have to remove the filter attribute explicitly. | |
| var isIE = !! $( "html.lt-ie9" ).length; | |
| if ( isIE ) { | |
| this.style.removeAttribute( "filter" ); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| this.style.removeAttribute( "filter" ); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I thank you so much for this, man this fixed the issue for me. The
el.style.filter='';didn't work on IE8.Thank you, thank you, and thank you 8 million times more.