Animating a background slideshow using jQuery, arrays & timers

Question

I'm having a bit of trouble with this piece of code. What I'm trying to do is to animate the transitions between backgrounds. I've tried using fadeIn() & fadeOut() but I'm not sure where to put these. A bit of help would be more than welcome :).

This is my current code:

jQuery(window).load(function(){
var images = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png',];
var i = 0;

var quotes = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png',];


setInterval(function(){

    jQuery('body').css('background-image', function() {
        if (i >= images.length){
            i=0;
        }
        return 'url(' + images[i++] + ')'; 

    }).fadeIn() ;

    var random = Math.floor(Math.random()*5)
    var disquote = quotes[random]
    $('#qtext').html(disquote);


}, 5000);
})

possible duplicate of [How do I change the background image using jQuery animation?](http://stackoverflow.com/questions/4630947/how-do-i-change-the-background-image-using-jquery-animation) — André Laszlo, Dec 07 '13 at 15:15

Roko C. Buljan · Answer 1 · 2013-12-07T16:42:25.883

You cannot fadeout a background image

A way you might do it is to have 1 full element that will cover the body, Than you set images both to body and that DIV making the DIV fade:

LIVE DEMO

<body>
  <div id="bg"></div>  
  <h1 id="qtext"></h1>
</body

CSS:

body, #bg{
  background: none no-repeat center center fixed;
  background-size:cover;
}
#bg{
  position:absolute;
  width:100%;
  height:100%;
}

JS/jQ:

jQuery(function( $ ){

  var images = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png'],
      quotes = ['Wowingly','Smooth','Something','Some quote'],
      tempR = 0,
      n = images.length,
      $bo = $('body'),
      $bg = $('#bg'),
      $qt = $('#qtext');


  for(var i=0; i<n; i++){
    var img = new Image().src = images[i];
  }

  function fader(){
    var r = Math.floor(Math.random()*n);
    $qt.html(quotes[r]);
    $bg.fadeTo(0,1).css({ backgroundImage: "url("+ images[tempR]+ ")" }).fadeTo(400,0);
    $bo.css({ backgroundImage: "url("+ images[r]+ ")" });
    tempR = r;
  }
  fader();

  setInterval(fader, 2000);

});

Thanks man, any advise on how I keep the images loaded, at the moment every time it changes the backgrounds it unloads the image and starts loading it again. EDIT: http://gyazo.com/9246979a3afe92de1148e2568af2519d — Terrorpants, Dec 07 '13 at 16:40

Xanfar · Answer 2 · 2013-12-07T17:35:00.817

I agree with Roko in that you cannot fade the background image the way you are trying to do so. However you can still do a simple fadeIn() and fadeOut().

You would merely have to do your image change after the fadeOut() completes then fade right back in.

As Roko mentioned you should be using a separate div stretched to you background to simulate the body background being changed.

Here is a fiddle for you to look at HERE

var images = ['red','blue','green','purple','yellow'];
var quotes = ['bg1os.png','bg2os.png','bg3os.png','bg4os.png','bg5os.png'];

setInterval(function(){

var random = Math.floor(Math.random()*5);
var disquote = quotes[random];
var bg = $.inArray(disquote, quotes);

$(".bodyBG").fadeOut("fast",
     function () {
        $('#qtext').html(disquote);
        $(this).css('background-color', images[bg] );
        // Animation complete.
        $(this).fadeIn("fast");
    });
}, 1000);

I noticed you have your quote being randomly generated so in my example I also generated the background that would be associated with the current quote you have being displayed.

Currently I have the background-color being changed but you can make a slight adjustment so that this occurs with the css property "background-image" instead.

Animating a background slideshow using jQuery, arrays & timers

2 Answers2