Avatar of ariestav
ariestav
 asked on

jQuery fadeOut to fadeIn is broken in IE9.

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>

Open in new window


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);
}

Open in new window


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'
		})
}

Open in new window


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/
JavaScriptWeb Languages and StandardsWeb Development

Avatar of undefined
Last Comment
ariestav

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
cmalakar

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ariestav

ASKER
Based on all those URLs I provided, I think it's safe to say that IE9 has problems with jQuery fades.  I will try your suggestion, however for animating to an opacity to and from something other than 0.
cmalakar

ariestav

ASKER
@cmalakar:  You were right to replace the fadeIn and fadeOut methods with animating the opacity.  It works in IE9.  Thanks!
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy