Jquery fadeIn和fadeOut交叉浏览器

这是我在所有浏览器中保持一致性时遇到的问题。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;
    });
});​

$（文档）.ready（函数（）{
$（“h2”）。追加（“”）
$（“.sc_菜单a”）。单击（函数（）{
var largePath=$（this.attr（“href”）；
var popupimgPath=“”；
var largeAlt=$（this.attr（“id”）；
$（“#大点击器”）.removeAttr（“href”）
if（typeof$（this）.attr（“popupimg”）！=“未定义”）{
popupimgPath=$（this.attr（“popupimg”）；
$（“#大点击器”）.attr({
href:popupimgPath
});
}
$（'#fadeBlock'）.fadeOut（'slow'，function（）{
美元（“#largeImg”）.attr({
src:largePath，
alt:largeAlt，
popupimg:popupimgPath
});
$（“h2”）.html（“+largeAlt+”）；
$（'fadeBlock'）.fadeIn（'fast'）；
});
返回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>

本周在华盛顿

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

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