如何使用jQuery淡入图像？

Question

第一个问题。

基本上，我已经制作了一系列图像并设法随机循环以改变背景。 它工作正常。 在设定的时间间隔和一切。 但过渡太过突然/不和谐。

我怎样才能让它慢慢淡入淡出？ 那就是与之相关的整个代码，甚至还有一个按钮来触发变化而不是等待。 我也想让它淡出！ 谢谢。

 var backs= [ "bike-1505039_1280.jpg", "bananas-698608_1280.jpg", "camera-813814_1280.jpg", "chevrons-937583_1280.jpg", "music-1283877_1280.jpg", "pattern-26442_1280.png", "people-2587310_1280.jpg", "puppy-1903313_1280.jpg", "road-166543_1280.jpg", "stone-1664918_1280.jpg", "street-1209403_1280.jpg", "technology-2643270_1280.jpg" ]; setInterval(function() { $("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")"); }, 10000); $("#backChange").on('click', function(event) { $("BODY").css("background-image", "url(" + backs[Math.floor(Math.random() * backs.length)] + ")"); }); 

Answer 1

由于您使用图像作为正文的背景，我建议使用CSS3作为背景属性：

请看一下这篇文章： CSS3淡化效果

Answer 2

使用animate属性淡入

$('background-image').animate({ opacity: 1 }, { duration: 3000 });