jQuery fadeout image

Question

I have a code to change image for every fixed intervals but this image is just normally changing. How can I use fadeout option to my code so that it will slowly fadeout to open a new image. My code follows

$(document).ready(function() {
        (function() {
            var curImgId = 0;
            var numberOfImages = 2;
            window.setInterval(function() {
                $('body').css('background-image','url(bg' + curImgId + '.jpg)');
                curImgId = (curImgId + 1) % numberOfImages;
            }, 15 * 100);
        })();
 });

score 1 · Answer 1 · answered Dec 16 '12 at 13:11

1

You cannot fade background images.. You can only fade elements (but fading the body will fade all contents as well)

You will need to add it as an element and put it behind all others.. and fade that element with .fadeIn() and .fadeOut()

answered Dec 16 '12 at 13:11

Gabriele Petrioli

191,379
34
261
317

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

1

You can take a look at this thread:
CSS3 background image transition.
It's a nice solution with css.

edited May 23 '17 at 12:04

Community

1
1

answered Dec 16 '12 at 13:25

pbibergal

2,901
1
17
19

Asad Saeeduddin · Answer 3 · 2012-12-16T13:35:15.667

You could fade the opacity of the element to zero, then change the background-image, then fade it back to 1:

$(document).ready(function() {
        (function() {
            var curImgId = 0;
            var numberOfImages = 2;
            window.setInterval(function() {
                $('body').fadeTo(500, 0, function(){
                    $(this).css('background-image','url(bg' + curImgId + '.jpg)');
                    $(this).fadeTo(500, 1);
                });
                curImgId = (curImgId + 1) % numberOfImages;
            }, 15 * 100);
        })();
 });

jQuery fadeout image

3 Answers3