How to fade in images using jQuery?

Question

first question.

Basically, Ive made an array of images and managed to cycle it around to change the background. It is working fine. At set intervals and that's it. But the transition is too sudden / abrupt.

How can I make it slowly and slowly fade away? This is all the code associated with this, there is even a button to trigger a change, rather than wait. I like to do it too! thank.

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

Run codeHide result

Answer 1

Since you use the image as the background for the body, I suggest using CSS3 for the background property:

, : Fade CSS3

Answer 2

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