how do I fade background images

Question

I wrote the following function to change the background image of the page to the current slide in the slider but the fade effect only works in chrome. What do I change to make the same effect happen in other browsers?

onAfterChange: function (center, index) {

    if (center.currentSlide === 0) {
        $('body').css('backgroundImage' ,  "url('image1.jpg')");
    } else if (center.currentSlide === 1) {
        $('body').css('backgroundImage' ,  "url('image2.jpg')");
    } else if (center.currentSlide === 2) {
        $('body').css('backgroundImage' ,  "url('image3.jpg')");
    } else if (center.currentSlide === 3) {
        $('body').css('backgroundImage' ,  "url('image4.jpg')");
    }
}

and the css I'm using looks like

-webkit-transition: background-image 1s ease;
-moz-transition: background-image 1s ease;
-ms-transition: background-image 1s ease;
-o-transition: background-image 1s ease;
transition: background-image 1s ease;

Thanks for the reply, they're still snapping instead of a nice smooth fade like I'm hoping for. — C Williams, Aug 06 '14 at 21:37
possible duplicate of [CSS3 Fade Effect](http://stackoverflow.com/questions/3079330/css3-fade-effect) — SeinopSys, Aug 06 '14 at 21:38
Nothing is wrong with using fadeOut, I'm just new to all this fancy stuff and this is what I currently have that works, not sure where to put a fadeOut and fadeIn in the function. — C Williams, Aug 06 '14 at 21:42
Tried getting it to work with the link provided but have not been able to yet. — C Williams, Aug 11 '14 at 20:28
Have you installed jquery easing? http://gsgd.co.uk/sandbox/jquery/easing/ — schanq, Aug 11 '14 at 20:37

score 1 · Accepted Answer · answered Aug 12 '14 at 17:25

I ended up using the jQuery plugin anystretch. Works just like backstretch but also gives you an option to specify the fadeIn time.

My edited code:

if (center.currentSlide === 0) {
                $('body').anystretch("images/sign.png", {speed:1500});
            } else if (center.currentSlide === 1) {
                $('body').anystretch("images/temple.png", {speed:1500});
            } else if (center.currentSlide === 2) {
                $('body').anystretch("images/park.png", {speed:1500});
            } else if (center.currentSlide === 3) {
                $('body').anystretch("images/water.png", {speed:1500});
            }

how do I fade background images

1 Answers1