jQuery：同时淡入+淡出

Question

我正在为我的朋友设计一个小型作品集网站，但我很难让淡入淡出效果正常工作。图像是滑动+渐变，但是渐变之间有很长的延迟，您可以暂时看到背景。我使用的滑块基于以下教程：

http://www.sohtanaka.com/web-design/automatic-image-slider-w-css-jquery/

我对原始代码所做的唯一更改是为图像添加标题并（尝试添加）图像滑动时的淡入淡出效果。

Javascript

$(".image_reel").fadeIn(500).delay(0).fadeOut(500);
    $(".image_reel").animate({
        left: -image_reelPosition
    }, 500);
    $(".image_reel").delay(0).fadeIn(500);

这里的代码可以在教程网站的rotate函数中找到。

所以，正如我上面所说的，这里的代码成功地淡化和滑动图像，但是，您可以暂时看到背景存在延迟。

任何帮助都非常感谢我如何让一个图像淡出，而另一张图像同时淡入。

Answer 1

我过去所做的是有两个重叠的 div，交替淡入/淡出，动态加载当前不可见的 div 中的下一个图像。

这是我用来完成它的代码：

var FeatureRotator = (function($,global) {
    var self = {},
        currentFeature = 0,
        images = [],
        imageData = [],
        imagePrefix = "/images/",
        timer = null,        
        totalImages = 0,
        initialFeature = 0,
        interval,
        blendSpeed;


    function setVisibleImage(iid) {
        $("#img1").attr('src',images[iid].src).css('opacity',1);
        $("#img2").css('opacity',0);
        $(".active").removeClass("active");
        $("#f"+iid).addClass("active");
    }

    function setCurrentImage(id) {
        currentFeature = id;
        setVisibleImage(id);
    }

    function doHoverIn(obj) {
        var position = global.parseInt(obj.target.attributes.position.value,10);

        if (currentFeature === position) {
            self.pause();
        } else {
            setCurrentImage(global.parseInt(position, 10));
            self.pause();
        }
    }

    function doHoverOut() {
        self.unpause();
    }

    self.init = function(options,callback) {
        var i = 0,
            tempImg = null,
            element = null,
            img1 = null,
            img2 = null;

        interval = options.interval || 5000;
        blendSpeed = options.blendSpeed || 500;
        element = options.element;
        initialFeature = options.initialFeature || 0;
        imagePrefix = options.imagePrefix;
        imageData = options.imageData || [];
        img1 = $("<img/>").attr('id','img1').css('cursor','pointer');
        img2 = $("<img/>").attr('id','img2').css('cursor','pointer').css('opacity','0').css('margin-top',-options.height);
        img1.click(function() {
            window.location = imageData[currentFeature].link;
        });
        img2.click(function() {
            window.location = imageData[currentFeature].link;
        });
        $(element).append(img1).append(img2);

        totalImages = imageData.length; //2;//$(".feature").size();

        for (i = 0;i < totalImages; i++) {
            tempImg = new global.Image();
            tempImg.src = imagePrefix + imageData[i].image;            //"feature_" + i + ".png";
            images.push(tempImg);


            $("#f"+i).css('background-image','url("'+imagePrefix+"feature_"+i+"_thumb.png"+'")')
                     .hover(doHoverIn, doHoverOut)
                     .attr('position',i);
        }

        setVisibleImage(initialFeature);

        if (options.autoStart) {
            self.start();
        }
        if (typeof callback === "function") {
            callback();
        }
    };

    function updateImage() {        
        var active = global.parseInt($("#img1").css('opacity'),10) === 1 ? "#img1" : "#img2",
            nextFeature = (currentFeature === totalImages-1 ? 0 : currentFeature+1);

        if (active === "#img1") {
            $("#img2").attr('src',images[nextFeature].src);

            $("#img2").fadeTo(blendSpeed, 1);            
            $("#img1").fadeTo(blendSpeed, 0);
        } else {
            $("#img1").attr('src',images[nextFeature].src);            
            $("#img1").fadeTo(blendSpeed, 1);            
            $("#img2").fadeTo(blendSpeed, 0);
        }

        $("#f"+currentFeature).removeClass("active");
        $("#f"+nextFeature).addClass("active");

        currentFeature = nextFeature;
    }



    self.start = function() {
        currentFeature = initialFeature;
        setVisibleImage(currentFeature);
        timer = global.setInterval(function(){
            updateImage();
        }, interval);
    };

    self.stop = function() {
        global.clearTimeout(timer);
    };

    self.pause = function() {
        global.clearTimeout(timer);
    };

    self.unpause = function() {
        timer = global.setInterval(function(){
            updateImage();
        }, interval);
    };


    return self;
}(this.jQuery, this));

请注意，要使这项工作保持原样，还需要做更多工作。您感兴趣的主要部分是 updateImage()

Answer 2

我能想到的最直接的解决方案是将image 包装在span、fadeIn image 本身中，然后将fadeOut 包装在span 中。

在效果之前或之后短暂“闪烁”的元素是我以前见过的，它通常只影响某些浏览器，并且与 JavaScript 实现有关。确保您使用的是最新版本的 jQuery 来改善跨浏览器效果。

Answer 3

你似乎并没有真正做任何滑动：只是淡出。所以我认为获得你想要的效果的方法是让两个图像同时可见。

假设您当前正在显示图像 1，并且您想要淡入图像 2。您给图像 1 z-index: 0;你给图像 2 z-index: 1 并淡入。在淡入淡出结束时的回调中，你将图像 1 设置为 display:none 或 opacity: 0，你可以将图像 2 的 z-index 重置为 0。

如果用户非常快速地单击按钮，那么棘手的一点将是如何处理当前的淡入淡出。考虑到淡入淡出的速度有多快，您可能希望保持单个过渡处于待处理状态，并在执行最后一个过渡之前完成第一个过渡。