如何使用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)] + ")");
});

- Al-m

---

slowly --> $().fadeIn("slow")，请阅读jQuery的文档。 - Jeremy Thille

那么是什么导致它消失了呢？有任何CSS过渡效果吗？ - adeneo

Answer 1

既然您将图片用作背景，我建议使用CSS3的background属性：

请参考这篇文章：CSS3淡入淡出效果

- Phuong Nguyen

---

谢谢！这个有效！虽然有时会有延迟或跳过，但我不确定是因为我的系统还是其他原因。但它仍然有效！谢谢。 - Al-m

Answer 2

使用animate属性来淡入。

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

- user8507737