CODEWITHSUNDEEP
jquery
Karthik Malla
Karthik Malla

Reputation: 5800

jQuery fadeout image

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);
        })();
 });

Upvotes: 0

Views: 202

Answers (3)

user1726343
user1726343

Reputation:

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);
        })();
 });

Upvotes: 0

pbibergal
pbibergal

Reputation: 2921

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

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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()

Upvotes: 1

Related Questions