Geek Answers Handbook

JQuery - IE6 - How to FadeOut and FadeIn at the same time?

I have an absolute div position sequence let's say

<div>...</div> <div style="display:none">...</div> <div style="display:none">...</div> <div style="display:none">...</div>

I wrote simple slide code using jQuery

 currentDiv.fadeOut('slow'); nextDiv.fadeIn('slow');

It works fine in FF / Chrome / Safari / IE7 / IE8, but not in IE6. I found in IE6, fadeOut and fadeIn do not happen at the same time as in other browsers, fadeIn always start after fadeOut completes. any ideas?

+4
source share
3 answers

I just tried this example, and both fadeIn and fadeOut work simultaneously 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 changed the example: http://docs.jquery.com/Effects/animate#paramsoptions

I already noticed that setting the style mapping to none in the actual div, and not in the css file or through jquery, can sometimes cause problems. Try just giving each div a displaynone class instead of setting your own style tag. Hope this helps and good luck!

+2
source

You checked this site: http://www.geeksucks.com/toolbox/23-jquery-fade-in-fade-out-effect.htm

? Here is the goog plugin for jQuery: http://malsup.com/jquery/cycle/

+2
source

Have you tried writing your own animation to achieve attenuation, rather than using the default ones? I don’t know it will be better, but it might be worth a try.

http://docs.jquery.com/Effects/animate

0
source

More articles:


All Articles