Geek asks and answers

Css background-image transition with jquery

I tried to create a simple css background-image transition using the fadeIn fadeOut jQuery function. I used the description on the jquery page to create mine. Now it works very well, but I would like to have some kind of crossover. At the moment, it just fades to white and white. Here is 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>

Hope someone knows the solution :)

Now I am porting 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 to do the same;) .. But I still don’t know how to do this with two separate divs and make them visible above each other and rotate them. Sorry, but I don’t understand how .. can someone give me a quick example, please?

+3
3

, div:

.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>

litte. , , . background-image css. .

+1

jQuery , . , RGB. , . - . CSS - background-image, URL-. jQuery , .

, , - div . div, div . , .

+2

You are currently using the callback function on fadeOut to change a new image.

This will only work after attenuation is complete (hence the transition to white, from white to image behavior).

You need one more “layer”, which you preload in already after the first (due to the fact that your html and css also need to be changed) and then simultaneously launch the feed and the attenuation. (Just stick to one call after another)

+1
source

More articles:


All Articles