javascript - Transition multiple background images - Stack Overflow

admin管理员组

文章数量:1332865

Trying to apply and image transition effect to a fixed bg image for a particular div. Currently looks like –

#top-header {
background: #FFF url('/images/image001.jpg') no-repeat top center fixed; 
width: 100%;height: 540px;
}   

<div id="top-header"></div>

I am aware that CSS3 allows for multiple bg images. Since images are being called through my CSS is it possible to apply javascript to the current div to achieve a fade in/out transition effect?

Thanks!

Trying to apply and image transition effect to a fixed bg image for a particular div. Currently looks like –

#top-header {
background: #FFF url('/images/image001.jpg') no-repeat top center fixed; 
width: 100%;height: 540px;
}   

<div id="top-header"></div>

I am aware that CSS3 allows for multiple bg images. Since images are being called through my CSS is it possible to apply javascript to the current div to achieve a fade in/out transition effect?

Thanks!

• javascript
• jquery
• css
• html
• css-transitions

Share Follow edited Dec 8, 2012 at 4:03 alditis 4,82733 gold badges5353 silver badges7979 bronze badges asked Dec 8, 2012 at 3:39 user1484523user1484523 2511 silver badge44 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can do a lot with JavaScript and CSS however this is a very solved problem with many options for basically showing slideshows. So it might be best to look at one of those. But let's try it anyway!

HTML:

<div id="slideshow"></div>​

CSS:

#slideshow {
    border: 1px solid gray;
    height: 330px;
    width: 592px;
    opacity: 0;
}

​ JavaScript:

$(document).ready(function() {
    var timeToDisplay = 2000;
    var opacityChangeDelay = 50;
    var opacityChangeAmount = 0.05;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;

    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };

    var fadeIn = function(opacity) {
        opacity = opacity + opacityChangeAmount;

        slideshow.css('opacity', opacity);

        if (opacity >= 1) {
            slideshow.trigger('fadeIn-plete');
            return;
        }
        setTimeout(function() {
            fadeIn(opacity);
        }, opacityChangeDelay);
    };

    var fadeOut = function(opacity) {
        opacity = opacity - opacityChangeAmount;

        slideshow.css('opacity', opacity);

        if (opacity <= 0) {
            slideshow.trigger('fadeOut-plete');
            return;
        }
        setTimeout(function() {
            fadeOut(opacity);
        }, opacityChangeDelay);
    };

    slideshow.on('fadeOut-plete', function(event) {
        transition();
        fadeIn(0);
    });

    slideshow.on('display-plete', function(event) {
        fadeOut(1);
    });

    slideshow.on('fadeIn-plete', function(event) {
        setTimeout(function() {
            slideshow.trigger('display-plete');
        }, timeToDisplay);
    });

    transition();
    fadeIn(0);
});​

Demo: jsfiddle

Of course, jQuery already has fadeIn and fadeOut so we can simplify our code by using them:

$(document).ready(function() {
    var timeToDisplay = 2000;

    var slideshow = $('#slideshow');
    var urls = [
       'http://sipi.usc.edu/database/preview/aerials/2.1.07.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.06.png',
       'http://sipi.usc.edu/database/preview/aerials/2.1.12.png'
    ];

    var index = 0;
    var transition = function() {
        var url = urls[index];

        slideshow.css('background-image', 'url(' + url + ')');

        index = index + 1;
        if (index > urls.length - 1) {
            index = 0;
        }
    };

    var run = function() {
        transition();
        slideshow.fadeIn('slow', function() {
            setTimeout(function() {
                slideshow.fadeOut('slow', run);
            }, timeToDisplay);
        });
    }

    run();
});​

Demo: jsfiddle

We could also use slideDown and slideUp: jsfiddle

So why not just use this? Well you could however I'm aware of one obvious flaw: we start the slideshow before making sure all the images have been downloaded by the browser. We should fix that. No doubt there are similar issues we may have overlooked but the choice is yours on what to use.

本文标签： javascriptTransition multiple background imagesStack Overflow