Question

我试图使用jQuery在几个背景图像之间淡入淡出。我目前有：

$(document).ready(function() {
var i = 1;
setInterval(function(){
    i = i + 1;
    if(i>4) {
        i = 1;
    }
    $('.page1').css({
        'background':"url('../img/change/" + i + ".jpg')#131313",
        'background-size': 'cover',
        "opacity":0.7
    });
    $('.page1').animate({ opacity: 1 }, { duration: 1600 });
},5000);
})

然而，这会导致背景颜色显着淡化＆＃391313＆＃39;相反，我试图让图像在顶部＆＃39;上方消失。之前的图像，导致一个融入另一个。我该怎么做呢？

Answer 1

在问题的评论中：＆＃34;如果你想要交叉淡化两张图片，你需要两个元素，将它们叠加在一起，然后调整每个人在不同方向的不透明度。＆＃34; - 克里斯哈迪

为了进一步说明，不支持动画背景图像，但背景颜色是。假设您为淡入淡出过渡设置了CSS动画，这将应用于背景但不适用于图像，因此您可以预期效果（渐变色）。不幸的是，它存在于CSS和JQuery中，并且除了多个元素之外没有已知的解决方法。

以下是有关如何实现此目标的教程：http://css3.bradshawenterprises.com/cfimg/

jQuery在背景图像之间淡出

1 个答案: