fadeIn et fadeOut navigateur croisé

Voici le site que j’ai du mal à garder la cohérence à travers tous les navigateurs. www.designyp.com Lorsque vous cliquez sur les vignettes, la grande image ci-dessus doit passer d’un effet de fondu à une autre image et le fait parfaitement en Chrome. Cependant, dans certains navigateurs, lorsque vous cliquez sur la vignette pour la première fois, les fondus disparaissent puis se fondent dans la même image, puis soudainement ils changent pour la nouvelle image. Il ne le fera qu’une fois pour chaque vignette, puis il fera son effet de fondu comme il le devait. Que se passe-t-il? Cela fonctionne très bien dans Chrome, mais pas dans IE, Opera, Safari. Voici le script JQuery pour l’effet de fondu:

$(document).ready(function() { $("h2").append('') $(".sc_menu a").click(function() { var largePath = $(this).attr("href"); var popupimgPath = ""; var largeAlt = $(this).attr("id"); $("#largeImgClicker").removeAttr("href") if (typeof $(this).attr("popupimg") != 'undefined') { popupimgPath = $(this).attr("popupimg"); $("#largeImgClicker").attr({ href: popupimgPath }); } $('#fadeBlock').fadeOut('slow', function() { $("#largeImg").attr({ src: largePath, alt: largeAlt, popupimg: popupimgPath }); $("h2").html(" " + largeAlt + " "); $('#fadeBlock').fadeIn('fast'); }); return false; }); });​ 

et voici le code HTML:

 
Large image

This Week In Washington

  • This Week In Wash Newsletter
  • ASCE Home Page
  • ASCE Committee on Sustainability

Il semble que vous ayez besoin de précharger les images qui ne sont pas visibles au début.

 $(document).ready(function(){ $("#webThumbs a").each(function(){ var url = $(this).attr("popupimg"), img = new Image(); if (url) { img.src = url; } }); });