Search code examples
javascripthtmlbackgroundfading

want to make changing bgs smoothly like fading stuff

I've spent many days trying to figure out how to animate background image transitions, but I can't find a solution. I am new to web development so please dont be harsh ;)

Here is some example code I got from someone else:

var images = ['bg1.jpg', 'bg2.jpg', 'bg3.jpg'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);

This code changes the background image instantly, but I want the new background image to fade in.

Here is a link to the page I am creating:

http://preferredmerchantservices.net/

I hope someone can help me, and thanks in advance.

Solution

  • If you don't want to loose too much time trying to figure out yourself, you should use a library such as jQuery. With that it's just a matter of fadeIn() and fadeOut().

    Since you are a novice in web development, you have to know jQuery is a really popular library almost everyone is using nowadays. It lets you write less code and do more.

    But most importantly, it ensures cross browser compatibility.