0

How can I change this so the progressive fade-in/fade-out that is now commented out applies only to the background image and not the whole containing div?

In its current state the entire DIV along with all content is fading in/out along with the background image change, i simply need the crossfade or fadein/out to apply to the background images as they transition. I do understand why it's applying to the whole div, i just am not figuring out how to write it differently so its only affecting the background-image.

$(window).load(function() {          
  var i =0;
  var images = [];
  images[ 0 ] = 'images/image1.jpg';
  images[ 1 ] = 'images/image2.jpg';
  images[ 2 ] = 'images/image3.jpg';
  images[ 3 ] = 'images/image4.jpg';

  var image = $('#container');
                //Initial Background image setup
  image.css('background-image', 'url(images/image4.jpg)');
                //Change image at regular intervals
  setInterval(function(){  
   //image.fadeOut(1000, function () {
   image.css('background-image', 'url(' + images [i++] +')');
   //image.fadeIn(1000);
   //});
   if(i == images.length)
    i = 0;
  }, 5000);           
 });
DMSJax
  • 1,709
  • 4
  • 22
  • 35

2 Answers2

1

You can not fade out just the background image. Its an all or nothing kind of thing. You could put the image on another element beneath the current div using z-index and fade that in or out.

Gary Storey
  • 1,779
  • 2
  • 14
  • 19
0

Refresh the window add this code after you set background image location.reload();

Sakthi Karthik
  • 3,105
  • 4
  • 25
  • 29
  • You misunderstand the question. If I un-comment the image.fadeout & image.fadein code, then the fadein/out is being applied to the entire DIV (Contents and background image) -- I need the fadein/fadeout to apply only to the background image and not the entire div. – DMSJax Aug 18 '14 at 15:21
  • You can not fade out just the background image. Its an all or nothing kind of thing. You could put the image on another element beneath the current div using z-index and fade that in or out. – Gary Storey Aug 18 '14 at 21:39
  • @GaryStorey Gary, thanks for the straight forward answer, that is ultimately what i ended up doing. Add it as an answer and i'll accept it. Thanks. – DMSJax Aug 19 '14 at 01:34