淡入淡出跨瀏覽器

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; 
     } 
    }); 
});