CODEWITHSUNDEEP
javascriptjqueryhtmlcss
C Williams
C Williams

Reputation: 139

how do I fade background images

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;

Upvotes: 1

Views: 164

Answers (1)

C Williams
C Williams

Reputation: 139

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

Upvotes: 1

Related Questions