jQuery fadeIn fadeOut - IE8 non sbiadisce

Question

Qualcuno può dirmi perché un jpg non si dissolverebbe o scomparirebbe in IE8. In questo momento sta semplicemente scomparendo e riapparendo senza cambiamenti di opacità. Ho questo set up localmente e su un server di pubblicazione, la cosa strana è che le immagini si dissolvono in e out bene a livello locale, è solo quando vado al server di pubblicazione che smettono di svanire.

Mi chiedo solo se mi manca qualcosa che qualcuno potrebbe rapidamente aiutarmi con la testa.

Ecco il gcRotateContent che si trova sul server di pubblicazione. Se faccio semplicemente scattare un'immagine e faccio una dissolvenza, funziona, per qualche motivo non funziona con questo 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

ho capito, posizione di impostazione css: relative sull'immagine, che verrà aggiustata IE8 non piace che, c'è una soluzione mi chiedo, la ricerca inizia.

Answer 2

Sostituire l'immagine con un div (delle stesse dimensioni) con un'immagine di sfondo e fade-in/-out div.

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

Answer 3

Apparentemente c'è una soluzione alternativa!

È sufficiente impostare i/elementi assoluti relativi posizionati i seguenti attributi css:

opacity:inherit; 
filter:inherit; 

Es:

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

divertirsi,

Omer

Answer 4

Ho appena avuto questo problema, e tutti i ticks css non ha funzionato. Il fadeIn/Out ha funzionato su FF e Chrome, ma non su IE8, l'elemento non si è mostrato affatto. In IE7 sono passati dall'invisibile al visibile.

Quindi per risolvere il mio problema volevo solo mantenere la dissolvenza in entrata/uscita sugli altri browser e rendere gli elementi visualizzati in IE8. La soluzione era usare il callback in questo modo:

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

In questo modo forza sempre il risultato che voglio alla fine.

Answer 5

Per una soluzione rapida e sporca (o se i suggerimenti sopra riportati non funzionano, come è il mio caso) puoi semplicemente sostituire fadeIn/fadeOut di jQuery con show/hide. Così nel codice HTML do:

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

e in alcuni file javascript di IE hack (ad es ieFixes.js) mettere:

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

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

dovrete modificare questo un po 'se si sta concatenamento animare le chiamate, ecc.