jQuery change div background-image with fadeIn/Out

Question

I\'m trying to create a fadeIn/Out effect on a site I created (edit: site url deleted)

Everything works great except when you click on one of the colors in the color

Answer 1

The solution that worked for me:

var image = $('#image-holder');
    image.fadeOut(1000, function () {
        image.css("background", "url('images/design-" + newColor + ".jpg')");
        image.fadeIn(1000);
    });

Answer 2

Most solutions just fade in the element, rather than the background. This means that your information is hidden while the background is loading, which is more than often not what you want.

I have written the following solution, which works by taking your background image and adding it as an image to the element. It then fades in when it has loaded while all the time keeping your child elements visible.

It also adds a preloading gif which disappears when it loads. You may need to test with a larger image to see this in action.

Code and fiddle/snippet below.

jQuery(document).ready(function() {

  jQuery('.Loader').each(function(index, el) {

    var sBG = jQuery(this).css('background-image');
    sBG = sBG.replace('url(', '').replace(')', '').replace('"', '').replace('"', '');

    jQuery(this).prepend('<img src="' + sBG + '" id="tmp_' + jQuery(this).attr('id') + '" class="BGImage" />');
    jQuery(this).css('background-image', 'url("http://www.arabianbusiness.com/skins/ab.main/gfx/loading_spinner.gif")');

    jQuery(".BGImage:not(.processed)").each(function() {
      this.onload = function() {

        var oElement = jQuery('#' + jQuery(this).attr('id').replace('tmp_', ''));
        jQuery('#' + jQuery(oElement).attr('id')).css('background-image', 'none');
        oElement.removeClass('Loader');
        jQuery(this).fadeIn(3000);

      }
    });
  });

});

.Loader {

  background-position: center;

  background-repeat: no-repeat;

  transition: background 0.5s linear;

}

.BGImage {

  position: absolute;

  z-index: -1;

  display: none;

}

#Test {

  height: 300px;

  background-image: url(https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcTMa7lFP0VdTl63KgPAOotSies-YQ3qSslOuXWE6FnFxJ_EfF7tsA);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="Test" class="Loader">Some text</div>

Answer 3

var currentBackground = 0;

var backgrounds = [];

backgrounds[0] = 'images/BasePic1.jpg';

backgrounds[1] = 'images/BasePic2.jpg';

backgrounds[2] = 'images/BasePic3.jpg';

backgrounds[3] = 'images/BasePic4.jpg';

backgrounds[4] = 'images/BasePic5.jpg';

function changeBackground() {

    currentBackground++;

    if(currentBackground > 4) currentBackground = 0;

    $('#image-holder').fadeOut(1500,function() {
        $('#image-holder').css({
            'background-image' : "url('" + backgrounds[currentBackground] + "')"
        });
        $('#image-holder').fadeIn(1500);
    });


    setTimeout(changeBackground, 5000);
}

$(document).ready(function() {

    setTimeout(changeBackground, 5000);  

}); 

Answer 4

Why not use jQuery to inject the markup that you need?

var $image_holder = $('#imageHolder'),
    $carousel_container = $('<div/>').attr('id', 'carousel_container'),
    images = ['first.jpg', 'second.jpg', 'third.jpg'];

for ( var i=0; i<images.length; i++ )
{
    $('<img/>').attr('src', images[i]).appendTo($carousel_container);
}

$carousel_container.insertAfter($image_holder);
$image_holder.hide();

Answer 5

You might want to try something like this

Replace

$('#image-holder').css("background", "url('images/design-" + newColor + ".jpg')");

with

$('#image-holder').animate({background : url('images/design-' + newColor + '.jpg') }, 3000);

Adjust the 3000 as necessary to increase the amount of time in the animation.

Totally untested

Answer 6

This was the only reasonable thing I found to fade a background image.

<div id="foo">
  <!-- some content here -->
</div>

Your CSS; now enhanced with CSS3 transition.

#foo {
  background-image: url('a.jpg');
  transition: background 1s linear;
}

Now swap out the background

$("#foo").css("background-image", "url(b.jpg)");

Or do it with native javascript

document.querySelector("#foo").style.backgroundImage = "url(b.jpg)";

Voilà, it fades!

---

Obvious disclaimer: if your browser doesn't support the CSS3 transition property, this won't work.