background-image слайдер, как сделать плавность?

#javascript #html #jquery #css

Всем привет!
Есть у меня JS код слайдера при помощи background-image.
Проблема в том, что он меняет изображения очень резко.

Помогите пожалуйста добавить плавность в это явление 



var bgArr = [
  "http://via.placeholder.com/250x250/ff00ff/000000",
  "http://via.placeholder.com/250x250/000000/ff00ff",
  "http://via.placeholder.com/250x250/ff00ff/cdfc11"
];
var i = 0;

// Start the slide show
setInterval(function() {
  $("#demo").css("background-image", "url(" + bgArr[i] + ")");
  (i < bgArr.length - 1) ? i++ : i = 0
}, 2000);
 

  





    

Ответы

Ответ 1

Задай блоку #demo   transition: all 1s;



var bgArr = [
  "http://via.placeholder.com/250x250/ff00ff/000000",
  "http://via.placeholder.com/250x250/000000/ff00ff",
  "http://via.placeholder.com/250x250/ff00ff/cdfc11"
];
var i = 0;

// Start the slide show
setInterval(function() {
  $("#demo").css("background-image", "url(" + bgArr[i] + ")");
  (i < bgArr.length - 1) ? i++ : i = 0
}, 2000);
#demo {
  transition: all 1s;
}