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.

Try jQuery! Simple to use and this job will be way easier. – Pangolin Sep 12 '11 at 15:49 — Pangolin, Sep 12 '11 at 15:49

score 1 · Answer 1 · edited May 23 '17 at 12:19

1

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>

edited May 23 '17 at 12:19

Community

1
1

answered Sep 12 '11 at 15:59

James Johnson

45,496
8
73
110

score 0 · Accepted Answer · answered Sep 12 '11 at 15:52

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.

want to make changing bgs smoothly like fading stuff

2 Answers2