CODEWITHSUNDEEP
javascriptjqueryhtmlcssbackground
Ryan Lester
Ryan Lester

Reputation: 2393

Fade background image in and out with jQuery?

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?

Upvotes: 7

Views: 35310

Answers (5)

Riccardo Volpe
Riccardo Volpe

Reputation: 1623

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>

Upvotes: 0

Hans. M.
Hans. M.

Reputation: 73

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.

Upvotes: 2

Cantrelby
Cantrelby

Reputation: 21

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!

Upvotes: 0

Hussein
Hussein

Reputation: 42808

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/

Upvotes: 24

Khez
Khez

Reputation: 10350

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

Upvotes: 1

Related Questions