fadeIn和fadeOut跨浏览器 [英] fadeIn and fadeOut cross browser

问题描述

这是我无法在所有浏览器中保持一致的网站. www.designyp.com 当您单击缩略图时，上方的大图像应通过淡入淡出效果过渡到另一张图像，并且在Chrome浏览器中效果最佳.但是，在某些浏览器中，当您第一次单击缩略图时，它将逐渐淡出，然后淡入同一图像，然后突然将其更改为新图像.它将仅对每个缩略图执行一次，然后将执行其预期的褪色效果.到底是怎么回事? 它在Chrome中运行良好，但在IE，Opera和Safari中却无法正常运行. 这是用于淡入淡出效果的JQuery脚本:

here is the site I am having trouble keeping consistent through all the browsers. www.designyp.com When you click on thumbnails, the large image above should transition through fading effect in to another image and it does it perfectly in Chrome. However, in some browsers when you click on the thumbnail for the first time it will fadeOut and then Fade in the same image and then abruptly change it to the new image. It will do it only once for each thumbnail, and then it will do its fading effect as it supposed to. What is going on? It works fine in Chrome, but not in IE, Opera, Safari. This is JQuery script for the fade effect:

$(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>

推荐答案

听起来您需要预加载开始时看不到的图像.

It sounds like you need to preload the images that aren't visible at the start.

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

这篇关于fadeIn和fadeOut跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！