want to make changing bgs smoothly like fading stuff

Question

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.

Answer 1

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.

Answer 2

Take a look at this question:

Fading in a background image

Here is a link that explains how to do a fade transition with jQuery:

http://jqueryfordesigners.com/image-loading/

If you need the jQuery library, you can paste this code into your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>