Question

第一个问题。

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

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

＆＃13;

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)] + ")");
});

＆＃13;

Answer 1

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

请看一下这篇文章：CSS3 Fade Effect

Answer 2

使用animate属性淡入

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

如何使用jQuery淡入图像？

2 个答案: