时间戳

首页 > 解决方案 > 如何使用 jQuery 交叉淡化图像

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

问题描述

我正在尝试交叉淡化一组图像，这些图像在每个图像之间平滑传输，用于幻灯片放映。我已经尝试过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);
});

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

标签： javascriptjqueryimageanimation

解决方案

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

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

然后重复这个过程。

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

推荐阅读