Question

i tried to create a simple css background-image transition usind the jquery fadeIn fadeOut function. I used the description on the jquery page to create mine.
Now, it works quite fine but I would like to have kind of a cross-fade transition. At the moment it’s just fading to white and from white. Here the code:

<script language="JavaScript" type="text/javascript">
   $(document).ready(function(){

   var imgArr = new Array( 
   'img/bg_1.jpg',
   'img/bg_2.jpg'
   );

   var preloadArr = new Array();
   var i;

   for(i=0; i < imgArr.length; i++){
   preloadArr[i] = new Image();
   preloadArr[i].src = imgArr[i];
   }

   var currImg = 1;
   var intID = setInterval(changeImg, 10000);

   function changeImg(){
      $('#head_bg').fadeOut('slow', function(){
      $(this).css('background','url(' + preloadArr[currImg++%preloadArr.length].src +') top center no-repeat');
      }).fadeIn('slow');
    }

  });
</script>

Hopefully someone knows a solution 🙂

Now I treid it with switching two different background classes, providing the same result.

NEW!!!NEW!!!NEW!!!NEW!!!NEW!!!

<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
   $('#head_bg').delay(4000).animate({opacity: 0}, 2000, function(){
      $('#head_bg').removeClass().addClass('bg2').animate({opacity: 1}, 2000);
   })
});
</script>

Now I have two ways of doing the same ;).. But still don’t have a clue how to do it with two seperate div’s and making them vsible over each other and revolving it. Sorry but I don’t get to the point of how to.. could someone give me a quick example, please?

Answer 1

Now I constructed a solution, thanks for the hint with fading two divs:

.bild {
  position:absolute;
  display:none;
  width:1000px;
  height:735px;
}

<div id="head_bg">
<div class="bild"><img src="img/bg_1.jpg" /></div>
<div class="bild"><img src="img/bg_2.jpg" /></div>
</div>

<script type='text/javascript'>
   $('.bild').hide();

   function bgSlide() {
     $(".bild").first().appendTo('#head_bg').fadeOut(5000);
     $(".bild").first().fadeIn(5000);

   setTimeout(bgSlide, 7000);
}
bgSlide();
</script>

But with one litte limitation. I wanted to have images overflowing the screen without crating scollbars. That’s why I used the css background-image tag. But for now it’s absolutely fine for me to move on with smaller images.