title: Correcting IE Cleartype/Filter Problem when Animating Opacity of Text with jQuery
body: <p>Hey all, I'm having an issue with IE that seems like a fairly known/common bug. I have an image slide show I've built out in jQuery that works flawlessly in other browsers. However, in IE I've run into a problem with the text being anti-aliased once the slide show runs one time. Which is to say, if there are three images in the slide show, then the first time each of those three images appear with their text, the text renders properly. However, once the slide show cycles through the text becomes anti-aliased. </p>
  
  <p>I've read up on this and looked through countless blogs about how to best correct it. The most common fix I've come across is removing the filter attribute once the opacity is at 100% like this: </p>
  
  <pre><code>$('#sample').animate( {opacity:1.0}, 500,
  function() {
      $(this).css('filter','');
  }
  </code></pre>
  
  <p>);</p>
  
  <p>This seems like it should work. But as I am still no jQuery guru, I'm having trouble finding where I should implement this in my code. Everywhere I have tried, either stops the slide show from working or blows it up and causes all the images to display at once up and down the page. </p>
  
  <p>Below is the code I am using, I would greatly appreciate any help you guys can give me, to point me in the right direction. Thanks!</p>
  
  <pre><code>   if(options.fade === true) {
  
   $("ul",obj).children().css({
   'width' : $("ul",obj).children().width(),
   'position' : 'absolute',
   'left' : 0
  
   });
  
   for(var i = $("ul",obj).children().length -1, y = 0; i &gt;= 0; i--, y++) {
   $("ul",obj).children().eq(y).css('zIndex', i + 99999);
  
   }
  
  
   fade();
  } 
  
   function fade() {
  
   setInterval(function() {
    $("ul",obj).children(':first').animate({ 'opacity' : 0}, options.speed, function() {      
    $("ul",obj)
      .children(':first')
      .css('opacity', 1)
      .css('zIndex', $("ul",obj).children(':last').css('zIndex') - 1)
      .appendTo("#db-slider-ul");   
  
       });
  
  
   }, options.pause);
   }    
  </code></pre>
  
  <p>});</p>