Fade Background Image in and Out with Jquery

Fade in background image with jQuery

use

 $('div.bgImage').animate({ opacity: 1 }, { duration: 3000 });

assuming you are starting of with style="opacity: 0;"

jQuery: fade out, change background image, then fade in

I figured it out. I needed to create a variable to pass into the index. Thanks for everyone's help!

  $(myType).change(function() {
    var myIndex = this.selectedIndex;
    $("#itemCustomize").fadeOut(50, function() { 
      $("#itemBaseImg").css('background-image', url + itemBaseImg[myIndex] + ")");
      $("#itemCustomize").fadeIn(200);
     });
  });

Background image fade out in jQuery

Here you go with a solution https://jsfiddle.net/h72uvm4h/1/

// Hide DISPIRIT text then fade in$('.container').hide().delay(7000).fadeIn("slow");// BG delay then fade out$(".intro-body").delay(8000).fadeOut("slow");

.intro {  display: table;  width: 100%;  height: auto;  padding: 100px 0;  text-align: center;  color: white;  background-color: black;}
.intro .intro-body {  display: table-cell;  vertical-align: middle;  background: url(../img/static.gif) no-repeat bottom center scroll;  -webkit-background-size: cover;  -moz-background-size: cover;  background-size: cover;  -o-background-size: cover;}
.brand-heading {  font-size: 40px;}
.container {  display:none;}
@media (min-width: 768px) {  .intro {    height: 100%;    padding: 0;  }  .intro .intro-body .brand-heading {    font-size: 100px;  }  /*.intro .intro-body .intro-text {        font-size: 26px;      }*/}
.btn-circle {  width: 70px;  height: 70px;  margin-top: 15px;  padding: 7px 16px;  border: 2px solid white;  border-radius: 100% !important;  font-size: 40px;  color: white;  background: transparent;  -webkit-transition: background 0.3s ease-in-out;  -moz-transition: background 0.3s ease-in-out;  transition: background 0.3s ease-in-out;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><header class="intro">  <div class="intro-body">    </div>  <div class="container">    <div class="row">      <div class="col-md-8 col-md-offset-2">        <h1 class="brand-heading"><i>Dispirit</i></h1>        <p class="intro-text"></p>        <a href="#about" class="btn btn-circle page-scroll">          <i class="fa fa-angle-double-down animated"></i>        </a>      </div>    </div>  </div></header>

Fade background image in and out with jQuery?

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/

jQuery change div background-image with fadeIn/Out

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);
    });

Cross fade background-image with jQuery

What you have to do is layer two element on top of each other. Then have one fadeout and the other fadein.

Here is how I would go about doing it ...

css ...

#background-images {
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1;
    }

#bImg1 {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 3; 
    background: url(starting-img1.jpg) no-repeat; 
    background-size: contain;
    }

#bImg2 {
    display: none;
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 2; 
    background: url(starting-img2.jpg) no-repeat; 
    background-size: contain;
    }

.container {
    width: 960px;
    height: 900px;
    background: rgba(255,255,255,.7);
    margin: auto;
    position: relative;
    z-index: 10;
}

The html ...

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<html>
<body>
    <div id="background-images">
        <div id="bImg1"></div>
        <div id="bImg2"></div>
    </div>
    <div class="container">
        Content Here
    </div>
</body>
</html>

The script ...

var imageSet1 = ["image1.jpg", "image2.jpg", "image3.jpg"];
var currentImageSet1 = 0;

var imageSet2 = ["image4.jpg", "image5.jpg", "image6.jpg"];
var currentImageSet2 = 0;

function changeBackgroundImages() {
    img1Fade();
    setTimeout(img2Fade, 2000);

}

function img1Fade(){

    $('#bImg1').fadeOut('slow', function(){$('#bImg1').css({background: 'url(' + imageSet1[++currentImageSet1] + ')'})});
    $('#bImg2').fadeIn('slow');
    if (currentImageSet1 >= imageSet1.length - 1) {

            currentImageSet1 -= imageSet1.length;
        };
}

function img2Fade(){

    $('#bImg2').fadeOut('slow', function(){$('#bImg2').css({background: 'url(' + imageSet2[++currentImageSet2] + ')'})});
    $('#bImg1').fadeIn('slow');
    if (currentImageSet2 >= imageSet2.length - 1) {

            currentImageSet2 -= imageSet2.length;
        };
}

$(document).ready(function(){

    setInterval(changeBackgroundImages, 5000);
});

You will need to mess with the timing to get it to look good. Make sure to set your urls to the images in the image array or when the sting in the css is built.

Jquery FadeIn/Out on background image is fading the sentences on top of it too

Thansk to melancia i know that i need to use the rgba to make a pretty fading in/out without interfering with the childrens.
Here is the code :

class changingImageObject {
    constructor(img1, img2, img3, id) {
        this.erasing = false;                           //Boolean
        this.op = 0.0;                                  //Opacité
        this.image = [img1, img2, img3];                //Les images
        this.id = id;                                   //L'id html
        this.x = 0;                                     //L'index
        this.eraseBg = this.eraseBg.bind(this);         //Les methods
        this.newBg = this.newBg.bind(this);             //
        this.startTimer = this.startTimer.bind(this);   //
        this.changeBg = this.changeBg.bind(this);       //
    };

    newBg() {
        if (this.op >= 1) { //If opacity is at 1 then change image and bring the opacity back to 0
            this.erasing = true;
            this.x = (this.x === 2) ? 0 : this.x + 1;
        }
        this.op += 0.01;
    };

    eraseBg() {
        if (this.op <= 0) { //If opacity is at 0 then bring the opacity back to 1
            this.erasing = false;
        }
        this.op -= 0.01;
    };

    changeBg() {
        console.log(this.op);
        if (this.erasing) this.eraseBg(); //If erasing then continue to erase
        else this.newBg();                //If not continue to add opacity
        $(this.id).css('background', 'rgba(0,0,0,' + this.op + ')');
        $(this.id).css('background-image', 'url(' + this.image[this.x] + ')');
    }

    startTimer() { //Change image after 3sec (looping)
        setInterval(this.changeBg, 30);
    };
}

const test = new changingImageObject("assets/img1.jpeg", "assets/img2.jpeg", "assets/img3.jpeg", '#myID');
test.startTimer();

How to fade changing background image

This is probably what you wanted:

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).fadeTo('slow', 1);

With a 1 second delay:

$('#elem').fadeTo('slow', 0.3, function()
{
    $(this).css('background-image', 'url(' + $img + ')');
}).delay(1000).fadeTo('slow', 1);

fade in background jquery

You cannot directly animate the background image property of an element. You can fade in an entire element though, so try to create a div that contains the image, and fade that in.

Try to mimic the background with a div instead:

CSS:

#bg {
  background-color: #1f304e;
  background-image: url('images/bg.jpg');
  background-repeat: no-repeat; 
  background-attachment:fixed;
  background-position: center 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
}

HTML:

<body>
  <div id="bg"></div>
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
</body>

Javascript:

$('#menu1').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg1.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 
$('#menu2').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg2.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 
$('#menu3').click(function(){
  $("#bg").fadeOut(function() {
    $("#bg").css({background : url('images/bg3.jpg') });
    $("#bg").fadeIn(300);
  }, 300);
}); 

This will fade out the background, swap the image, then fade it back in. If you want a proper crossfade, you will need at least two divs in the background.

---

Related Topics