title: jQuery fadeIn fadeOut - IE8 does not fade
body: <p>Can anyone tell me why a .jpg would not fade in or fade out in IE8.  Right now it is just disapearing and reappearing with no opacity changes.  I have this set up locally and on a publishing server, strange thing is the images fade in and out just fine locally, it's only when I go to the publishing server that they cease to fade.</p>
  
  <p>Just wondering if I am missing something someone could quickly help me with off the top of their heads.</p>
  
  <p>Here is the gcRotateContent that is on the publishing server, If I just throw an image up and do a fade in out it works, for some reason it doesn't work with this markup.</p>
  
  <pre><code>&lt;div class="gcRotateContent"&gt;
     &lt;div id="USCFRR2EN" class="gcEmployeeProfile"&gt;
        &lt;div class="gcEmployeeProfileHeading"&gt;
           Meet John&lt;/div&gt;
        &lt;div class="gcEmployeeProfileContent"&gt;
           &lt;div class="gcEmployeeProfileHRPad"&gt;
           &lt;/div&gt;
           &lt;div class="gcEmployeeProfileHR"&gt;
           &lt;/div&gt;
           &lt;div class="gcEmployeeProfileHRPad"&gt;
           &lt;/div&gt;
           &lt;div class="gcEmployeeProfileSLVideo"&gt;
              &lt;img src="/PublishingImages/Profile_JOHN-190x96.jpg" alt="Portrait of employee John."
                 height="96" width="190"&gt;&lt;/div&gt;
           &lt;div class="gcEmployeeProfileName"&gt;
           &lt;/div&gt;
           &lt;div class="gcEmployeeProfileTitle"&gt;
              Software Development Lead, Server Performance&lt;/div&gt;
           &lt;div class="gcEmployeeProfileQuote"&gt;
              “You will find no other company with the sheer breadth of technologies. The things you get to see and learn from other
              people are amazing.”&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="gcEmployeeProfileFooter"&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;div class="gcRotate"&gt;
        &lt;div class="gcRotateContent"&gt;
           &lt;div style="border: solid 2px black; text-align: center; width: 150px;"&gt;
              This is first content
              &lt;img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
                 alt="First" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="gcRotateContent"&gt;
           &lt;div style="border: solid 2px black; text-align: center; width: 150px"&gt;
              This is second content
              &lt;img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
                 alt="Second" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="gcRotateContent"&gt;
           &lt;div style="border: solid 2px black; text-align: center; width: 150px"&gt;
              This is third content
              &lt;img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" /&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
  
  
  
     &lt;div&gt;
        This shouldn't move.
     &lt;/div&gt;
  
     &lt;script type="text/javascript"&gt;
        function fadeContent() {
  
           $(".gcRotateContent").first().customFadeOut(500, function() {
              $(".gcRotateContent:hidden:first").customFadeIn(500)
           });
           $(".gcRotateContent").first().appendTo($(".gcRotateContent").parent());
        }
  
        $(".gcRotate").height(0);
  
        $(".gcRotateContent").each(
           function() {
              if ($(".gcRotate").height() &lt; $(this).height()) {
                 $(".gcRotate").height($(this).height());
              }
           }
           );
  
        $(".gcRotateContent").each(function() {
           $(this).css("display", "none")
        });
  
        $(".gcRotate").hover(function() { window.clearInterval(timer) }, function() { timer = window.setInterval("fadeContent()", 2000) });
  
        $(".gcRotateContent").first().show(0);
        var timer = window.setInterval("fadeContent()", 2000);
  
        (function($) {
           $.fn.customFadeIn = function(speed, callback) {
              $(this).fadeIn(speed, function() {
                 if (jQuery.browser.msie)
                    $(this).get(0).style.removeAttribute('filter');
                 if (callback != undefined)
                    callback();
              });
           };
           $.fn.customFadeOut = function(speed, callback) {
              $(this).fadeOut(speed, function() {
                 if (jQuery.browser.msie)
                    $(this).get(0).style.removeAttribute('filter');
                 if (callback != undefined)
                    callback();
              });
           };
        })(jQuery);
     &lt;/script&gt;
  </code></pre>