淡入淡出跨浏览器

Question

这里是我通过所有浏览器保持一致的问题。 www.designyp.com 当你点击缩略图时，上面的大图应该通过淡入淡出效果转换到另一个图像，并且它在Chrome中完美实现。但是，在某些浏览器中，当您第一次点击缩略图时，它将会淡入淡出，然后淡入相同的图像，然后突然将其更改为新图像。它只会为每个缩略图执行一次，然后它会按照它的设置执行其淡入淡出效果。到底是怎么回事？ 它在Chrome中正常工作，但在IE，Opera，Safari中无法正常工作。 这是淡入淡出效果jQuery脚本：

$(document).ready(function() { 
    $("h2").append('<em></em>') 
    $(".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：

<div id="fadeBlock"> 
<a class="fancybox" rel="group" href="img/thisWeekInWashLong.jpg" id="largeImgClicker"><img src="img/thisWeekInWash.jpg" alt="Large image" id="largeImg" popupimg="img/thisWeekInWashLong.jpg" /></a> 
</div> 
<h2>This Week In Washington</h2> 
<div class="sc_menu"> 
<ul class="webT" id="webThumbs" input type="image" value="Go"> 
<li><a href="img/thisWeekInWash.jpg" popupimg="img/thisWeekInWashLong.jpg" id="This Week In Washington" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('thisWeekInWash','','img/keyContactThumbON.jpg',1)"><img src="img/keyContactThumbBlur.jpg" alt="This Week In Wash Newsletter" name="thisWeekInWash" width="126" height="82" border="0"></a></li> 
<li><a href="img/caissons.jpg" popupimg="img/caissonsLong.jpg" id="Caisson Case Study Discussion Forum" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('caissons','','img/caissonsThumbON.jpg',1)"><img src="img/caissonsThumbBlur.jpg" name="caissons" width="126" height="82" border="0"></a></li> 
<li><a href="img/asceSite.jpg" popupimg="img/asceSiteLong.jpg" id="ASCE Home Page" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('asceHomePage','','img/asceWebThumbON.jpg',1)"><img src="img/asceWebThumbBlur.jpg" alt="ASCE Home Page" name="asceHomePage" width="126" height="82"/></a></li> 
<li><a href="img/sustainability.jpg" id="ASCE Committee on Sustainability Site" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('sustainability','','img/sustainabilityThumbON.jpg',1)"><img src="img/sustainabilityThumbBlur.jpg" name="sustainability" alt="ASCE Committee on Sustainability" width="126" height="82"/></a></li> 
</ul> 
</div> 

Answer 1

这听起来像你需要预装不在一开始看到的图像。

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