Fade In / Fade Out background images without white background

javascript jquery html css

10,869

Solution 1

AHH ! Finally ! I found a nice technique ! I'm using a double wrapper.

The problem in your code is a bit logical. You can't fadeOut and fadeIn at the same time a single wrapper.

So the idea is to create two wrapper and to switch between them back and forth. We have one wrapper called: "wrapper_top" that encapsulate the second wrapper called: "wrapper_bottom". And the magic was to put beside the second wrapper: your content.

Thus having the structure ready which is the following:

<div id='wrapper_top'>
    <div id='content'>YOUR CONTENT</div>
    <div id='wrapper_bottom'></div>
</div>

Then a bit of JS+CSS and voilà ! It will be dynamic with any amount of images !!!

Here is the implementation: http://jsbin.com/wisofeqetu/1/

Solution 2

<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(window).load(function() {           
  var i =0; 
  var images = ['image2.png','image3.png','image1.png'];
  var image = $('#slideit');
                //Initial Background image setup
  image.css('background-image', 'url(image1.png)');
                //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);            
 });
</script>
</head>
<body>
      <div id="slideit" style="width:700px;height:391px;">  
      </div>
</body>
</html>

10,869

Lee

Updated on September 17, 2022

Comments

Lee over 1 year
I want to create a website with background images that change over time with a fade in/fade out effect, but I don't want to use the existing jQuery fade in/fade out effect because with when one image faded out, a white background appeared before other image faded in. I found a plugin named Maximage that suits my request but it uses img tags while I want to work with background-image CSS (I have a good reason for doing this). Does anyone know how to do this?

Here's my HTML code:
```
<div id="wrapper">
//My contain here
</div>
```
Here's my JavaScript code so far:
```
//Auto change Background Image over time
$(window).load(function() {
   var images = ['img/top/bg-1.jpg','img/top/bg-2.jpg','img/top/bg-3.jpg'];
    var i = 0;

    function changeBackground() {
        $('#wrapper').fadeOut(500, function(){
            $('#wrapper').css('background-image', function () {
            if (i >= images.length) {
                    i = 0;
                }

                return 'url(' + images[i++] + ')';
            });
            $('#wrapper').fadeIn(500);
        })      
    }
    changeBackground();
    setInterval(changeBackground, 3000);
});
```
Example: http://www.aaronvanderzwan.com/maximage/examples/basic.html
- Tim McClure about 9 years
  
  Can you please provide a working jsfiddle?
- adeneo about 9 years
  
  Are you just asking how to cross fade two elements, and not fade the same element out, change background, and fade it back in ?
Lee about 9 years

Thank you but i must use back ground image instead of image tag because in the wrapper, i use other plugin that can only run perfectly with wrapper background image. On the other hand, fadeIn and fadeOut function of jquery does not suit the request of my mentor. He want something like this: aaronvanderzwan.com/maximage/examples/basic.html (no white flash after fadeOut)
Yves Lange about 9 years

Minus 1 because you are not respecting the requirement :( I was also going for this solution but using the css property background-image is a bit more complicated. But your code is nice. So sad to put a -1 to a good answer like that... sadly it's off-topic :(
Lee about 9 years

sorry i did not put -1 to you, that's someone else