Jquery Background Fader

Question

I have a script that works, however the background images are "popping" in and not fading in and out smoothly. They change instantly. I am only testing 2 backgrounds right now, not 4.

This is my new Fiddle.

It is only toggling between the 1st background image and the 4th.

EDIT: New JQuery is below:

$(document).ready(function(){
    setInterval(function() {
      $("body").toggleClass('background2', 1000);
      $("body").toggleClass('background3', 1000);
      $("body").toggleClass('background4', 1000);
    }, 3000);
});

Answer 1

You'll have to use jQuery UI's toggleClass() function.

$(element).toggleClass('otherClass', duration);

In your case, you'd set the initial class of the body to background1 and toggle between the other classes. I've set that up for you here, but the reason why you're not seeing anything is because all of your classes point to the same image.

You can see it in action here, where I've commented out your images and used simple colors.