jQuery fadeIn fadeOut - IE8 ne se fane pas

Question

Quelqu'un peut-il me dire pourquoi un .jpg ne devrait pas se faner ou disparaître dans IE8. En ce moment, il disparaît et réapparaît sans aucun changement d'opacité. J'ai ceci mis en place localement et sur un serveur de publication, chose étrange est les images se fanent dedans et dehors juste bien localement, c'est seulement quand je vais au serveur de publication qu'elles cessent de s'estomper.

Je me demandais juste s'il me manquait quelque chose que quelqu'un pourrait rapidement m'aider de la tête.

Voici le contenu de gcRotateContent qui est sur le serveur de publication, Si je lance juste une image et que je fais un fondu en dehors cela fonctionne, pour une raison quelconque cela ne fonctionne pas avec ce balisage.

<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

I figured it out, la position de réglage de css: par rapport à l'image, aparently IE8 n'aime pas, est-il une solution que je me demande, la recherche commence.

Answer 2

Remplacez votre image avec un div (de la même taille) avec une image de fond et fade-in/div départ.

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

Answer 3

Apparemment, il existe une solution de contournement!

suffit de définir les éléments positionnés absolu/relatif des attributs css suivants:

opacity:inherit; 
filter:inherit; 

Ex:

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

Amusez-vous,

Omer

Answer 4

Je viens d'avoir cette problème, et toutes les tiques css n'a pas fonctionné. Le fadeIn/Out a fonctionné sur FF et Chrome, mais pas sur IE8, l'élément ne s'est pas montré du tout. Dans IE7, ils sont passés de l'invisible au visible. Donc, pour résoudre mon problème, je voulais juste garder le fadeIn/Out sur les autres navigateurs et faire apparaître les éléments dans IE8. La solution était d'utiliser le rappel comme ceci:

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

De cette façon, je force toujours le résultat que je veux à la fin.

Answer 5

Pour une correction rapide et incorrecte (ou si les suggestions ci-dessus ne fonctionnent pas, comme c'est mon cas), vous pouvez simplement remplacer fadeIn/fadeOut de jQuery par show/hide. Ainsi, dans le code html faire:

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

et javascript fichier de IE hacks (par exemple ieFixes.js) mis:

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

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

Vous aurez à modifier cela un peu si vous enchaînant animer des appels, etc.