Still hassling with IE6 and show/hide/fadeInOut

Still hassling with IE6 and show/hide/fadeInOut

Yeah I know, this is getting boring - but it also drives me insane! :-)

I have this little test here - far from perfect, I know - but the basic functions are there:
- six #test_trigger_x DIVs that work as Trigger for six #test DIVs below with their own class
- each trigger fadeOut() all #test DIVs and then fadeIn() #test.objectx

Works fine in FF and Safari, in IE6 it's just strange:
- first trigger works half and shows #test.object1 but wont hide anything else
- second trigger works also half: it hides #test.object1 successfully but does nothing else

I'm not that good with special IE bugs or JS either (learning....) but this cannot be right ;-)
And workarounds that i missed? Couldn't find anything specific...

Thanks in advance!


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">

  5. <head>
  6. <title>TEST</title>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

  11. <script>
  12. $(document).ready(function(){
  13. $("#test_trigger_1").click(function(){
  14. $("div#test").fadeOut(100);
  15. $("div#test.object1").fadeIn(500);
  16. });
  18. $("#test_trigger_2").click(function(){
  19. $("div#test").fadeOut(100);
  20. $("div#test.object2").fadeIn(500);
  21. });
  23. $("#test_trigger_3").click(function(){
  24. $("div#test").fadeOut(100);
  25. $("div#test.object3").fadeIn(500);
  26. });

  28. $("#test_trigger_4").click(function(){
  29. $("div#test").fadeOut(100);
  30. $("div#test.object4").fadeIn(500);
  31. });
  33. $("#test_trigger_5").click(function(){
  34. $("div#test").fadeOut(100);
  35. $("div#test.object5").fadeIn(500);
  36. });
  38. $("#test_trigger_6").click(function(){
  39. $("div#test").fadeOut(100);
  40. $("div#test.object6").fadeIn(500);
  41. });
  42. });
  43. </script>

  45. <style type="text/css">
  46. <!--
  47. -->
  48. </style>
  49. </head>

  51. <body>
  52. <div id="test_trigger_1" style="background-color:#CCC; width:120px; height:20px">A</div>
  53. <div id="test_trigger_2" style="background-color:#FFE; width:120px; height:20px">B</div>
  54. <div id="test_trigger_3" style="background-color:#EEE; width:120px; height:20px">C</div>
  55. <div id="test_trigger_4" style="background-color:#FCF; width:120px; height:20px">D</div>
  56. <div id="test_trigger_5" style="background-color:#DEF; width:120px; height:20px">E</div>
  57. <div id="test_trigger_6" style="background-color:#ef1; width:120px; height:20px">F</div>

  59. <div id="test" class="object1" style="background-color:#CCC; width:120px; height:120px">TEST A</div>
  60. <div id="test" class="object2" style="background-color:#FFE; width:120px; height:120px">TEST B</div>
  61. <div id="test" class="object3" style="background-color:#EEE; width:120px; height:120px">TEST C</div>
  62. <div id="test" class="object4" style="background-color:#FCF; width:120px; height:120px">TEST D</div>
  63. <div id="test" class="object5" style="background-color:#DEF; width:120px; height:120px">TEST E</div>
  64. <div id="test" class="object6" style="background-color:#ef1; width:120px; height:120px">TEST F</div>

  66. </body>
  67. </html>