troubleshooting Question

jQuery fadeOut to fadeIn is broken in IE9.

Avatar of ariestav
ariestav asked on
Web Languages and StandardsJavaScriptWeb Development
4 Comments1 Solution2360 ViewsLast Modified:
This bug is really tough to fix, and I've found some things out there on Stack Overflow as well as on the jQuery site itself.  However, some people seem like they can't recreate the bug.  My code is working in Safari, Firefox, IE8, Chrome, but in IE9 it simply will not work.

So here is my markup:
<div id="articles" class="dropshadow gradientSilver articleBG"> <!-- Main area for articles -->

<div id="page">
	[some standard html goes here.  just some <p> tags. ]
</div>

</div>

I have a button on a sub navigation bar that calls getSubPage(this) for its onclick event.  

Here's my javascript that handles the swapping of the html content:

function swapPage(e)
{
		//call the server to load correct page
		$.ajax({
		type: 'POST',
		url: 'pages.php',
		data: {subpage : e.name},
		success: function(d){
			$('#page').html(d).chain($('#page').fadeIn('slow'));
		},
		dataType: 'html'
		})
}

function getSubPage(e)
{
	//get the height of the articles div currently being viewed
	var articleHeight = $('#articles').height();
	
	//set the height of the articles div for the fade / remove
	$('#articles').height(articleHeight);

	//fade out the current page
	$('#page').fadeOut('slow', function(){swapPage(e)});
	
	//move the pointer over to the appropriate tab on the sub nav bar
	setPointer(e);
}

So all of this works fine and dandy in the browsers I mentioned above, but in IE9, the only way I can get the newly requested content to show up is to set the display property of the pages div by adding one line in the swapPage function like so:

function swapPage(e)
{
		//call the server to load correct page
		$.ajax({
		type: 'POST',
		url: 'pages.php',
		data: {subpage : e.name},
		success: function(d){
                       $('#page').css({display: 'block'});
			$('#page').html(d).chain($('#page').fadeIn('slow'));
		},
		dataType: 'html'
		})
}

The problem is that this "fix" causes the new content to simply flash on the screen after the page fade out and the request is called.  So, that effects all the other browsers as well.   The client is requesting a smooth fade between entire pages.  What's the deal?!  

Please, if you know a good work around so that IE9 has a smooth transition, that would be most appreciated.

I found these links pointing to some issues with this as well, but nobody has a solid response:

http://forum.jquery.com/topic/jquery-code-not-working-on-ie9

http://bugs.jquery.com/ticket/8540

http://stackoverflow.com/questions/6702416/ie9-fadein-not-working

http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 4 Comments.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 4 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros