jQuery fadeIn fadeOut - IE8 does not fade

Question

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.

Just wondering if I am missing something someone could quickly help me with off the top of their heads.

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.

<div class="gcRotateContent">
   <div id="USCFRR2EN" class="gcEmployeeProfile">
      <div class="gcEmployeeProfileHeading">
         Meet John</div>
      <div class="gcEmployeeProfileContent">
         <div class="gcEmployeeProfileHRPad">
         </div>
         <div class="gcEmployeeProfileHR">
         </div>
         <div class="gcEmployeeProfileHRPad">
         </div>
         <div class="gcEmployeeProfileSLVideo">
            <img src="/PublishingImages/Profile_JOHN-190x96.jpg" alt="Portrait of employee John."
               height="96" width="190"></div>
         <div class="gcEmployeeProfileName">
         </div>
         <div class="gcEmployeeProfileTitle">
            Software Development Lead, Server Performance</div>
         <div class="gcEmployeeProfileQuote">
            “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.”</div>
      </div>
      <div class="gcEmployeeProfileFooter">
      </div>
   </div>
</div>

<div class="gcRotate">
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px;">
            This is first content
            <img src="http://pix.motivatedphotos.com/2008/6/16/633492359109161542-Skills.jpg"
               alt="First" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is second content
            <img src="http://www.funnycorner.net/funny-pictures/5010/cheezburger-locats.jpg"
               alt="Second" />
         </div>
      </div>
      <div class="gcRotateContent">
         <div style="border: solid 2px black; text-align: center; width: 150px">
            This is third content
            <img src="http://icanhascheezburger.files.wordpress.com/2007/06/business.jpg" alt="Third" />
         </div>
      </div>
   </div>



   <div>
      This shouldn't move.
   </div>

   <script type="text/javascript">
      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() < $(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);
   </script>

Answer 1

Apparently there's a workaround!

Simply set the absolute/relative positioned elements the following css attributes:

opacity:inherit;
filter:inherit;

E.g:

<div>
<img id='myImg' src='http://mydomain.com' style='position:absolute;top:10px;left:5px;filter:inherit;opacity:inherit' />
</div>

Have fun,

Omer

Answer 2

I figured it out, css setting position:relative on the image, aparently ie8 doesn't like that, is there a workaround I wonder, the search begins.

Answer 3

I just had this problem, and all the css ticks didn't worked. The fadeIn/Out worked on FF and Chrome, but not in IE8, the element didn't showed up at all. In IE7 they just went from invisible to visible.

So to fix my problem I just wanted to keep the fadeIn/Out on the other browsers and make the elements appear in IE8. The solution was to use the callback like so:

$(".elements").fadeIn("slow",function(){$(this).show()}):
$(".elements").fadeOut("slow",function(){$(this).hide()}):

This way I always force the result I want in the end.

Answer 4

For a quick and dirty fix (or if the suggestions above are just not working, as is my case) you can simply replace jQuery's fadeIn/fadeOut with show/hide. So in the html do:

<!--[if IE]>
<script type="text/javascript src="ieFixes.js"></script>
<![endif]-->

and in some javascript file of IE hacks (eg ieFixes.js) put:

jQuery.fn.fadeIn = function() {
    this.show();
}

jQuery.fn.fadeOut = function() {
    this.hide();
}

You'll have to tweak this a bit if you're chaining animate calls, etc.

Answer 5

Replace your image with a div (of the same size) with a background image and fade-in/-out the div.

<div style="background-image:url('paper.gif');height:xxxpx;width:xxxpx"></div>