javascript - 如何使用 jQuery 交叉淡入淡出图像

Question

我正在尝试对一组图像进行交叉淡入淡出，以便在每个图像之间平滑传输，以进行幻灯片放映。我尝试过 fadeIn 和 fadeOut 以及 fadeTo 但似乎都没有创建交叉淡入淡出效果。这里的其他文章都不能准确回答我的问题。

该功能尚未完全完成，所以我知道图像不会重置，我只是想让交叉淡入淡出工作。

$(function() {

    var slides = ["images/slideshow1.jpg", "images/slideshow2.jpg", "images/slideshow3.jpg", "images/slideshow4.jpg", "images/slideshow5.jpg"];        
    var slidePos = 0;

    setInterval(function() {    
        slidePos++;

        $("#slideshow-image").fadeOut(500).fadeIn(1000).attr("src", slides[slidePos]);
    }, 3000);
});

实际:图像切换到下一个，然后淡出，然后淡入预期:交叉淡入淡出

Answer 1

您必须制作不透明度为零的第二个图像元素，并通过将其位置设置为绝对来使其重叠。

然后将其不透明度设置为 1.0，并删除现在隐藏在新图像元素下方的旧图像元素。

然后重复这个过程。

如果您只有两个元素并在它们之间循环，则不必创建新元素。