javascript - 如何使用 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 Fade Effect