Fade background image in and out with jQuery?

Question

So far, I've tried a bunch of things to the effect of the following, without success:

<script type="text/javascript">
var x = 0;

while (true) {
    /* change background-image of #slide using some variation
    of animate or fadeIn/fadeOut with or without setTimeout */
    x++;
}
</script>

Any ideas?

Answer 1

You can fade background colors but not background images. The way to work around this is to have your images as <img> tags and hide them by default display:none;. Give your images position:absolute and z-index:-1 so they act like backgrounds and are behind everything else.

Here's a quick example of images fading one after the other.

HTML

<img src=".." />
<img src=".." />

CSS

img{
 position:absolute;
 z-index:-1;
 display:none;
}

jQuery

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000* index).fadeIn(3000).fadeOut();
    });
}
test();

Check working example at http://jsfiddle.net/RyGKV/

Answer 2

You can fade backgound-images! in and out!

jQuery:

$('#yourdiv').animate({opacity: 0}, 0).css("background-image", "url(image.jpeg)").animate({opacity: 1}, 2500);

Edit:

This will fade the whole div not onley the background-image.

Answer 3

Although you can't directly fade-in a background-image. You can fade-in a solitary element containing only a background-image...

Here's an example

Answer 4

I got here because I was looking for a solution to fading background images based on a <select> option change. I combined what I had already written with Hussein's jsfiddle above and came up with this jsfiddle.net/v4BMC/.

This initially stacks two identical images on top of each other. When the <select> is changed, the top image's style attribute is removed, the bottom image's src is changed and the top image is faded out to reveal the bottom one. (The top image finishes with a style="display:none" which needs to be removed at the beginning of the operation, otherwise it doesn't work.)

Hope this is useful to someone else and not too irrelevant to be included here!

Answer 5

Here a demo to fade background-image by using the opacity and transition CSS properties with javascript/jQuery:

$( document ).ready(function() {
  $( "#textarea" ).focusin(function(){
    $( "#blur" ).css({
      "opacity" : "1.0",
      "transition" : "opacity 600ms ease-in-out"
    });
  }).focusout(function(){
    $( "#blur" ).css({
      "opacity" : "0",
      "transition" : "opacity 600ms ease-in-out"
    });
  });
});

body {
  background-size: cover;
  background-image: url("https://vpsland.com/blog/wp-content/uploads/2016/04/linux-vps-benefits-g.jpg");
}

#textarea {
  width: 50%;
}

#blur {
  position: absolute;
  height: 100%;
  width: 100%;
  background-size: cover;
  background-image: url("https://static1.makeuseofimages.com/wordpress/wp-content/uploads/2014/07/linux-overdrive.jpg?q=50&fit=contain&w=1500&h=750&dpr=1.5");
  top: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
}

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<input id="textarea" type="text" placeholder="Focus here to trigger the transition...">
<div id="blur"></div>