CODEWITHSUNDEEP
jquerycssbackground-image
joe
joe

Reputation: 41

css background-image transition with jquery

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?

Upvotes: 3

Views: 6107

Answers (3)

joe
joe

Reputation: 41

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.

Upvotes: 1

Marnix van Valen
Marnix van Valen

Reputation: 13673

The transition effects in jQuery are intended for values that can be set numerically. You can fade one color to another by altering the RGB values. You can fade in an image by making it less transparent. Cross-fading two background images is something completely different. The only CSS value involved is the background-image property, which is a URL. jQuery actually solves it nicely by fading out and and fading in the other.

The easiest thing I can think of is to use two divs on top of each other. Fade out the transparency of the top-most div to make the bottom div visible. Depending on the content of the images that should not look too bad.

Upvotes: 2

Nick Downton
Nick Downton

Reputation: 178

At the moment you are using a callback function on fadeOut to fade the new image in.

This will only fire once the fadeout has completed (hence the fade to white, white to image behaviour).

You need to have another "layer" which you preload the image in to already behind the first (from the looks of it your html and css will need altering as well) and then fire the fadein and fadeout at the same time. (Just sticking one call after the other will do it)

Upvotes: 1

Related Questions