fadeIn和fadeOut交叉浏览器

这是我无法在所有浏览器中保持一致的网站。 www.designyp.com当你点击缩略图时,上面的大图像应该通过淡入淡出效果转换到另一个图像,它在Chrome中完美地完成。 但是,在某些浏览器中,当您第一次单击缩略图时,它将淡入淡出,然后淡入同一图像,然后突然将其更改为新图像。 它只对每个缩略图执行一次,然后它将按预期执行其淡入淡出效果。 到底是怎么回事? 它适用于Chrome,但不适用于IE,Opera,Safari。 这是淡入淡出效果的JQuery脚本:

$(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; }); });​ 

这是HTML:

 
Large image

This Week In Washington

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

听起来您需要预加载一开始不可见的图像。

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