fadeInとfadeOutクロスブラウザ

Question

ここはすべてのブラウザで一貫性を保つのに問題があるサイトです。 www.designyp.com サムネイルをクリックすると、上記の大きな画像はフェードイン効果によって別の画像に移行し、Chromeでは完全にその効果を発揮します。しかし、一部のブラウザでは、最初にサムネイルをクリックすると、フェードアウトしてから同じイメージをフェードインし、突然新しいイメージに変更します。サムネイルごとに1回だけ実行し、それが想定していたようにフェーディング効果を発揮します。何が起こっている？ 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; 
     } 
    }); 
});