ie bugging out. any ideas?

ie bugging out. any ideas?

hi I'm working on some jquery  http://www.paulbunker.plus.com/fadPanslides2.html It works like a dream in ff and chrome but ie is a pain I have no idea why. any ideas?


Thanks for taking the time to have a look :)

-Paul

  2. <style type="text/css">
  3. .link {
  4. color:red;
  5. font-size: 24px;
  6. text-transform: uppercase;
  7. text-decoration: none;
  8. word-spacing: 20px;
  9. }
  10. .link:hover {
  11. color:#000;
  12. }
  13. .content {
  14. position: absolute;
  15. visibility: hidden;
  16. top: 40px;
  17. background: #099;
  18. height: 300px;
  19. width: 300px;
  20. border: 2px solid #003;
  21. overflow: hidden;
  22. }
  23. #subLinks {
  24. position: absolute;
  25. top: 350px;
  26. }
  27. #slideViewer {
  28. overflow:hidden;
  29. position:relative;
  30. float:left;
  31. width:300px;
  32. height:300px;
  33. }
  34. #slideContainer {
  35. float: left;
  36. height: 300px;
  37. width: 9999999px;
  38. position: absolute;
  39. }
  40. .slides {
  41. float: left;
  42. height: 300px;
  43. width: 300px;
  44. }
  45. .hidden {
  46. visibility: hidden;
  47. }

  49. .visible {
  50. visibility: visible;
  51. }
  52. </style>
  53. <script type="text/javascript">

  55.  
  56. $(document).ready(function(){
  57.  
  59.  // Main Navigation
  60.  $('.link').click(function(){
  61.  
  62.  current = '#'+$('.visible').attr('id');
  63.  next = '#'+$(this).attr('id')+'Div';
  64.  $(current).animate({opacity:0},500,'swing', function(){
  65.  $(current).removeClass('visible');
  66.  $(current).animate({opacity:1},0,'swing');
  67.  });
  68.  if (current != next ){
  69.  $(next).animate({opacity:0},200,'swing', function(){
  70.  $(next).addClass('visible');
  71.  $(next).animate({opacity:1},500,'swing');
  72.  })};
  74.  if (next == '#oneDiv' ){
  75.  $('#subLinks').removeClass('hidden').addClass('visible');
  76.  }
  77.  if (next == current) {
  78.  $('#subLinks').removeClass('visible').addClass('hidden');
  79.  }
  80.  if (next != '#oneDiv' ){
  81.  $('#subLinks').removeClass('visible').addClass('hidden');
  82.  }

  85.  }); // End Main Navigation
  86.  //Slides
  87. $('#slideContainer div:first').addClass('currentSlide');
  88. $('.slide').click(function(){
  89. var evt = $(this).attr('id'); // back or next
  90. var current = $('.currentSlide');
  91. var next = current.next();
  92. var prev = current.prev();
  94. if ($(current).prev().length == 0){
  95. prev = $('#slideContainer div:last');
  96. }
  97. if ((next).length == 0){
  98. next = $('#slideContainer div:first');
  99. }
  101. var currentLeft = ((current).position().left);
  102. var previousLeft = ((prev).position().left);
  103. var nextLeft = ((next).position().left);
  105. if (evt == 'next'){
  106. (current).removeClass('currentSlide');
  107. (next).addClass('currentSlide');
  108. var translateLeft = -nextLeft;
  109. $('#slideContainer').animate({'left':translateLeft}, 500);
  110. }
  111. if (evt == 'back'){
  112. (current).removeClass('currentSlide');
  113. (prev).addClass('currentSlide');
  114. var translateLeft = -previousLeft;
  115. $('#slideContainer').animate({'left':translateLeft}, 500);
  116. }
  118. }); 
  120. }); // End Document Ready


  123. </script>
  124. </head>

  126. <body>
  127. <a href="#" class="link" id="one">one</a> <a href="#" class="link" id="two">two</a> <a href="#" class="link" id="three">three</a>
  128. <div class="content" id="oneDiv">
  129.     <div id="slideViewer">
  130.   <div id="slideContainer">    
  131.                 <div class="slides">Slide 1</div>
  132.                 <div class="slides">Slide 2</div>
  133.                 <div class="slides">Slide 3</div>
  134.         </div>
  135.     </div>
  136. </div>
  137. <div class="content" id="twoDiv">Content for  id "two" Goes Here</div>
  138. <div class="content" id="threeDiv">Content for  id "three" Goes Here</div>
  139. <div id="subLinks" class="hidden"><a href="#" id="back" class="slide">Back</a> - <a href="#" id="next" class="slide">Next</a></div>

  141. </body>