bennadel/index.htm

## index.htm
<!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>

## misc.js
this.style.removeAttribute( "filter" );
	<!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>