jQuery fadeIn fadeOut - IE8 no se desvanece

Question

¿Alguien puede decirme por qué un .jpg no se desvanecería o se desvanecería en IE8. En este momento solo está desapareciendo y reapareciendo sin cambios de opacidad. Tengo esto configurado localmente y en un servidor de publicación, lo extraño es que las imágenes se desvanecen y desaparecen perfectamente localmente, solo cuando voy al servidor de publicación dejan de desvanecerse.

Solo me pregunto si me falta algo con lo que alguien pueda ayudarme rápidamente con la cabeza.

Aquí está el contenido de gcRotatetent que está en el servidor de publicación, si solo lanzo una imagen y hago un fundido de entrada funciona, por alguna razón no funciona con este marcado.

<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

lo he descubierto, posición de ajuste css: relativa en la imagen, aparentemente IE8 no le gusta eso, ¿hay una solución Me pregunto, comienza la búsqueda.

Answer 2

Reemplazar su imagen con un div (del mismo tamaño) una imagen de fondo y de fundido de entrada/salida privado el div.

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

Answer 3

¡Aparentemente hay una solución!

Basta con establecer los elementos absolutos/correspondientes ubicados en los siguientes atributos de CSS:

opacity:inherit; 
filter:inherit; 

Ejem:

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

divertirse,

Omer

Answer 4

acabo de tener esta problema, y ​​todos los tics css no funcionó. El fadeIn/Out funcionó en FF y Chrome, pero no en IE8, el elemento no apareció en absoluto. En IE7 simplemente pasaron de invisible a visible.

Para solucionar mi problema solo quería mantener el fadeIn/Out en los otros navegadores y hacer que los elementos aparezcan en IE8. La solución fue utilizar la devolución de llamada como sigue:

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

De esta manera siempre forzo el resultado que quiero al final.

Answer 5

Para una solución rápida y sucia (o si las sugerencias anteriores simplemente no funcionan, como es mi caso) simplemente puede reemplazar fadeIn/fadeOut de jQuery con show/hide. Así, en el html hacer:

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

y en algunos javascript archivo de IE hacks (por ejemplo ieFixes.js) poner:

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

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

que tendrá que ajustar esto un poco si está encadenando llamadas animadas, etc.