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

fadeIn和fadeOut交叉浏览器

1 个答案: