如何使用 jQuery 使图像淡入淡出？

Question

第一个问题。

基本上，我制作了一组图像并设法随机循环它以更改背景。它工作正常。在设定的时间间隔和一切。但是过渡太sudden/jarring了。

请问如何让它慢慢淡入淡出？这就是与之相关的整个代码，甚至还有一个按钮可以触发更改而不是等待。我也想让它淡入淡出！谢谢。

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 作为背景属性:

请看看这个post：CSS3 Fade Effect

Answer 2

使用动画属性淡入

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

如何使用 jQuery 使图像淡入淡出？

How to fade in images using jQuery?

javascript

arrays

jquery

fade

setinterval