I have a sequence of position absolute div, say
<div>...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
<div style="display:none">...</div>
I wrote a simple slide code using jQuery
currentDiv.fadeOut('slow');
nextDiv.fadeIn('slow');
It works perfectly in FF/Chrome/Safari/IE7/IE8, but not in IE6. I found in IE6, fadeOut and fadeIn not occur simultaneously as in other browsers, fadeIn always begin after fadeOut is completed. any ideas?
Have you checked this site: http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm
? Here is a goog Plugin for jQuery: http://malsup.com/jquery/cycle/
Have you tried writing your own animation to achieve the fades, rather than using the defaults supplied. I don't know that it will be any better, but it might be worth a try.
I just tried this example and both a fadeIn and fadeOut work at the same time in IE6:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$(document.body).click(function () {
$("div#one").fadeOut("slow");
$("div#two").fadeIn("slow");
});
});
</script>
<style>
span { color:red; cursor:pointer; }
div { margin:3px; width:80px; display:none;
height:80px; float:left; }
div#one { background:#f00; display:block;}
div#two { background:#0f0; }
div#three { background:#00f; }
</style>
</head>
<body>
<span>Click here...</span>
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</body>
</html>
I modified the example from: http://docs.jquery.com/Effects/animate#paramsoptions
I've noticed before that setting the styles display to none in the actual div instead of in the css file or via jquery can sometimes cause issues. Try just giving each div a class of displaynone instead of setting their style tag. Hopefully this helps and good luck!