CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EternalFootman
EternalFootman

Reputation: 5

JQuery Delays Getting Out of Sync After Some Time - Replacing Background Images

I'm pretty new to all of this, but I've been able to kludge together a nice looking site, but I have a div that I want to change backgrounds on after 10 seconds or so. I wanted the transition between images to be nicer, so I wanted the div to fade out, then the image to change, then have the div fade back in. So, basically, I set the timeout for 10.5 seconds. There's a .5 second fade in in the beginning, then 9 seconds of display time, then a .5 second fadeout. Then the timeout should wait another .5 seconds, change the image, and then start all over again.

The code works at first, but after about 10 minutes, the fade in and fade out gets out of sync with the timeout function. I'm not sure why, and it may not matter (who is going to sit and stare at my website for 30 minutes), but it's bothering me, so I thought I'd ask. Here's the code, and thank you in advance!

$(function() {

var colorBackgrounds = new Array(
'url(backgrounds/home/full/20140714-_MG_0604.jpg)',
'url(backgrounds/home/full/20140714-_MG_0860.jpg)',
'url(backgrounds/home/full/20140716-IMG_1296.jpg)'
);
var colorCurrent = 0;
var greyCurrent = 0;

function nextBackground() {
$('.bodyBackground').fadeIn(500);
$('.bodyBackground').delay(9000).fadeOut(500);
$('.bodyBackground').css({
    'background':colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
    'background-position':'center center',
    'background-repeat':'no-repeat',
    'background-attachment':'fixed'
    });
setTimeout(nextBackground, 10500);
}

setTimeout(nextBackground, 10500);
$('.bodyBackground').fadeIn(500);
$('.bodyBackground').delay(9000).fadeOut(500)
$('.bodyBackground').css({
    'background':colorBackgrounds[0],
    'background-position':'center center',
    'background-repeat':'no-repeat',
    'background-attachment':'fixed'});
});

Upvotes: 0

Views: 127

Answers (2)

Orelsanpls
Orelsanpls

Reputation: 23515

$(function () {

    var colorBackgrounds = new Array(
            'url(backgrounds/home/full/20140714-_MG_0604.jpg)',
            'url(backgrounds/home/full/20140714-_MG_0860.jpg)',
            'url(backgrounds/home/full/20140716-IMG_1296.jpg)'
            );
    var colorCurrent = 0;
    var greyCurrent = 0;

    function nextBackground() {
        $('.bodyBackground').fadeOut(500, function () {
            $('.bodyBackground').css({
                'background': colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
                'background-position': 'center center',
                'background-repeat': 'no-repeat',
                'background-attachment': 'fixed'
            });
            $('.bodyBackground').fadeIn(500, function () {
                setTimeout(nextBackground, 9000);
            });
        });
    }

    nextBackground();

});

FadeIn and FadeOut are asynchronous method. It means that they are executed in parallel with the main process.

The solution here is to use Callbacks. A callback is a function that is called when an asynchronous function finished it work.

You can see that I propose you some code with others differencies! Instead of showing then hiding. It hide and show. Its simpliers to understand to me.

Upvotes: 0

devduderino
devduderino

Reputation: 71

seconding @mplungjan Since the "fadeOut" and "fadeIn" methods are asynchronous , you're going to get out of sequence unless you use callbacks to enforce the order you would like this performed in. Like so : 

var colorBackgrounds = new Array(
    'url(backgrounds/home/full/20140714-_MG_0604.jpg)',
    'url(backgrounds/home/full/20140714-_MG_0860.jpg)',
    'url(backgrounds/home/full/20140716-IMG_1296.jpg)'
);

var colorCurrent = 0;
var greyCurrent = 0;

function nextBackground() {
  $('.bodyBackground').fadeIn(500, function(){
    $('.bodyBackground').delay(9000).fadeOut(500, function(){
      $('.bodyBackground').css({
        'background':colorBackgrounds[colorCurrent = ++colorCurrent % colorBackgrounds.length],
        'background-position':'center center',
        'background-repeat':'no-repeat',
        'background-attachment':'fixed'
      });
      setTimeout(nextBackground, 10500);
    });
  });  
}


nextBackground();

Upvotes: 1

Related Questions