title: jQuery IE8 css not working or atleast not working correctly
body: <p>I've written a custom slider for this project <a href="http://dl.dropbox.com/u/18292748/Sites/enblaze/index.html" rel="nofollow noreferrer">http://dl.dropbox.com/u/18292748/Sites/enblaze/index.html</a> and it seems to work correctly everywhere except IE8. What happens is when the page is initially loaded, the first slide looks fine, but then when you change go to the next slide everything breaks like that:</p>
  
  <p><img src="https://i.stack.imgur.com/GMt9o.jpg" alt="IE8Fail"></p>
  
  <p>The two functions that mainly alter the css are: </p>
  
  <pre><code>function showAnimation(slide) {
      if(animating || visible) {
          return;
      } else {
          animating = true;
          //enter animation
          // slide.wrapper.css({'visibility': 'visible'});
          // $('wrap_slides').addClass('ieFails');
              slide.bg.animate({'opacity':1}, speed, function() {
                  slide.sep.animate({'opacity':1}, speed+400);
                      slide.typo.animate({'opacity':1, top:0}, speed, function() {
                           slide.people.animate({'opacity':1}, speed, function() {
                               slide.preview.animate({'opacity':1},speed, function () {
                                   animating = false;
                                   visible = true;
                               });
                           });
                       });
              });
      }
  }
  
  function hideAnimation(slide, cb) {
      if(animating || visible==false) {
          return;
      } else {
          animating = true;
          //exit animation
          slide.preview.animate({'opacity':0},speedxit, function() {
              slide.people.animate({'opacity':0},speedxit,function() {
                  slide.sep.animate({'opacity':0},speedxit, function() {
                      slide.typo.animate({'opacity':0, 'top': -220},speedxit, function() {
                          animating = false;
                          visible = false;
                          $('.wrap_slide').css({'z-index':8});
                          slide.wrapper.css({'z-index':9});
                          cb();
                      });
                  });
              });
          });
      }
  }
  </code></pre>
  
  <p>This is the complete js source for the slider <a href="http://dl.dropbox.com/u/18292748/Sites/enblaze/assets/javascripts/lib/slider.js" rel="nofollow noreferrer">http://dl.dropbox.com/u/18292748/Sites/enblaze/assets/javascripts/lib/slider.js</a> 
  Not that pretty but it worked so far. 
  I've tried to make a conditional targeting for ie8 only, but even the addClass function (to target activated slide only, since the first slide looks fine) doesn't seem to work.</p>
  
  <p>I feel helpless.</p>