para - jQuery fadeIn fadeOut-IE8 no se desvanece

jquery 3.3.1 fadein

Question

¿Alguien puede decirme por qué un archivo .jpg no se desvanecería o desaparecerí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 aparecen y desaparecen localmente, solo cuando voy al servidor de publicación dejan de desvanecerse.

Solo me pregunto si me estoy perdiendo algo que alguien podría ayudarme rápidamente con la cabeza.

Aquí está el gcRotateContent que está en el servidor de publicación. Si simplemente tiro una imagen y hago un fundido, funciona por alguna razón que 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

¡Aparentemente hay una solución!

Simplemente establezca los elementos posicionados absolutos / relativos los siguientes atributos css:

opacity:inherit;
filter:inherit;

P.ej:

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

Que te diviertas,

Omer

Answer 2

Acabo de tener este problema, y ​​todas las garrapatas css no funcionaron. El fadeIn / Out funcionó en FF y Chrome, pero no en IE8, el elemento no se mostró en absoluto. En IE7 solo pasaron de lo invisible a lo visible.

Así que 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 usar la devolución de llamada como tal:

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

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

Answer 3

Me di cuenta, css setting position: relativo a la imagen, aparentemente ie8 no le gusta eso, hay una solución que me pregunto, la búsqueda comienza.

Answer 4

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

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

y en algún archivo javascript de hacks de IE (por ejemplo, ieFixes.js) ponga:

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

Tendrás que modificar esto un poco si estás encadenando llamadas animadas, etc.

Answer 5

Reemplace su imagen con un div (del mismo tamaño) con una imagen de fondo y aplique / desvanezca el div.

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