Make Background Fade Out/In

Make background fade out/in

Sure, you can use the transition property directly on the background-color:

div {
   background-color: white;    

   /* transition the background-color over 1s with a linear animation */
   transition: background-color 1s linear;
}

/* the :hover that causes the background-color to change */
div:hover {
   background-color: transparent;      
}

Here's an example of a red background fading out on :hover.

How can I make a background color change on click and then fade out to a linear gradient?

While you cannot directly transition linear-gradients or animate background-images, you can animate opacity to make things fade in and out.

Using the before and after pseudo elements of the div to hold its linear-gradient background image and the green background color we can get them to fade in and out as required using CSS animations.

let radioBtn = document.querySelector('.radio-btn');

radioBtn.addEventListener('click', function(e){

                  function changeColor(){
                    e.target.parentElement.style.backgroundColor = 'green';
                    e.target.parentElement.classList.remove('fadein');
                  }
    
                  function fadeColor(){
                    e.target.parentElement.style.backgroundColor = 'transparent';
                    e.target.parentElement.classList.add('fadein');
                  }

                  changeColor();
                  setTimeout(fadeColor, 100);
})

div
 {
 position: relative;
}

div:before, div:after {
  position: absolute;
  z-index: -1;
 content: '';
 width: 100%;
 height: 100%;
 animation-duration: .3s;
 animation-name: none;
 animation-iteration-count: 1;
 animation-fill-mode: forwards;
 }
 
div:before {
  opacity: 1;
  background-image: linear-gradient(to bottom, #ffffff, #fdfdfd, #fbfcfb, #fafafa, #f8f8f8, #f5f5f5, #f1f1f1, #eeeeee, #e8e8e8, #e1e1e1, #dbdbdb, #d5d5d5);
}

div.fadein:before {
  animation-name: fadeIn;
}

div:after {
  opacity: 0;
  background-color: green;
}

div.fadein:after {
  animation-name: fadeOut;
}

@keyframes fadeIn {
   0% {
     opacity: 0;
     }
 100% {
     opacity: 1;
     }
}

@keyframes fadeOut {
   0% {
     opacity: 1;
     }
 100% {
     opacity: 0;
     }
}
@keyframes none {
  0% {
  }
  100% {
  }
  }

<div> 
<input type='radio' class='radio-btn'>
</div>

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>

How to add fade in and fade out when changing background-image with javascript or jQuery

I modified your code just a bit to make this new version, that use Fade out / Fade In functions from here, using visibility CSS attribute. This will just make the image disappear, the background will be visible a moment, and then the new image will appear. There are many ways of doing a Fade effect, and this is one of them. You could want something else (for example, the image becomes black and then the new image appears). If you want to try another types of Fade, you can search through CSS filters list.

var urls = [
  'url(https://placekitten.com/g/350/150)',
  'url(https://placekitten.com/g/200/600)',
  'url(https://placekitten.com/g/550/250)',
  'url(https://placekitten.com/g/700/300)',
  'url(https://placekitten.com/g/300/550)',
  'url(https://placekitten.com/g/400/200)',
  'url(https://placekitten.com/g/350/750)'
];
var active = Math.floor(Math.random() * (urls.length));

setInterval(function() {
  let rand = Math.floor(Math.random() * 4);
  if (rand <= 2 && rand == document.getElementsByClassName('image')[0].getAttribute("data-changed")) {
    rand = rand + 1;
  } else if (rand == 2 && rand == document.getElementsByClassName('image')[0].getAttribute("data-changed")) {
    rand = rand - 1;
  }

  document.getElementsByClassName('image')[rand].classList.remove("visible");
  document.getElementsByClassName('image')[rand].classList.add("hidden");

  setTimeout(function(){
    document.getElementsByClassName('image')[rand].style.backgroundImage = urls[active];
    document.getElementsByClassName('image')[0].setAttribute("data-changed", rand);

    document.getElementsByClassName('image')[rand].classList.remove("hidden");
    document.getElementsByClassName('image')[rand].classList.add("visible");

  },400); // 400 ms because animation duration is 0.4s

  active++;
  if (active == urls.length) active = 0;
  //})
}, 2000);

.image {
  background-size: cover;
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

.one { 
  background-image: url(https://placekitten.com/g/350/150); 
}
.two { 
  background-image: url(https://placekitten.com/g/300/550); 
}
.three { 
  background-image: url(https://placekitten.com/g/400/200); 
}
.four { 
  background-image: url(https://placekitten.com/g/350/750); 
}

.visible {
      opacity: 1;
      transition: opacity 0.4s ease;
}

.hidden {
  opacity: 0;
  transition: opacity 0.4s ease;
}

<div class="image visible one"></div>
<div class="image visible two"></div>
<div class="image visible three"></div>
<div class="image visible four"></div>

However, this is not the best way of doing it. So I modified the code, and added some JQuery stuff.

var urls = [

  'url(https://placekitten.com/g/350/150)',

  'url(https://placekitten.com/g/200/600)',

  'url(https://placekitten.com/g/550/250)',

  'url(https://placekitten.com/g/700/300)',

  'url(https://placekitten.com/g/300/550)',

  'url(https://placekitten.com/g/400/200)',

  'url(https://placekitten.com/g/350/750)'

];

// Select the next image, may be one of the actual displayed images

var active = Math.floor(Math.random() * (urls.length));

setInterval(function() {

  // Select randomnly the next div to change

  var rand = Math.floor(Math.random() * 4);

  

  // Store this list, so that we only make one call to the page

  // equiv : document.getElementsByClassName('image')

  let images = $('.image');

  

  // equiv : images[0].getAttribute("data-changed")

  let datachanged = images.attr("data-changed");

  

  // This conditions work, but their is a better way of doing it. See comment below the snippet

  if (rand <= 2 && rand == datachanged ) {

    rand += 1;

  } else if (rand >= 2 && rand == datachanged ) {

    rand -= 1;

  }

  // Jquery selector for the targetted div

  let current = $('.image:nth-child('+(rand+1)+')');

  

  // Now we can use JQuery methods, such as toggleClass

  current.toggleClass("visible hidden");

  

  // The fade effect takes 0.4ms, or 400ms

  // So we use a setTimeout to change the bg in 400ms and not immediatly

  // Once the background is changed, the "visible" class we be added

  // If you want to change the duration, remember to also change it in the CSS

  setTimeout(function(){

  

    // equiv : images[rand].style.backgroundImage = urls[active];

    current.css('background-image', urls[active]);

    

    

    images[0].setAttribute("data-changed", rand);

  

    current.toggleClass("hidden visible");

  

  },400); // 400 ms because CSS animation duration is 0.4s

  // Change active value so that the background will not be same next time

  active++;

  

  // Faster way to write if(...) { active = 0 }

  active = (active == urls.length) ? 0 : active ;

  

}, 2000);

.image {

  background-size: cover;

  display: inline-block;

  width: 200px;

  height: 200px;

  border: 1px solid red;

  transition: opacity 0.4s ease;

}

.one { 

  background-image: url(https://placekitten.com/g/350/150); 

}

.two { 

  background-image: url(https://placekitten.com/g/300/550); 

}

.three { 

  background-image: url(https://placekitten.com/g/400/200); 

}

.four { 

  background-image: url(https://placekitten.com/g/350/750); 

}

.visible {

      opacity: 1;

}

.hidden {

  opacity: 0;

}

<!-- JQuery 3.3.1 -->

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>

  <div class="image one" data-changed="0"></div>

  <div class="image two"></div>

  <div class="image three"></div>

  <div class="image four"></div>

</div>

How to make an image fade in and another fade out with one button click?

A few mistakes, and a few things to improve.

Inside your if conditionals, you were assigning the value of 1 and 2 to the variable currentscene instead of using the comparison operator ==. I added the remainder operator to be able to continue the loop indefinitely.

Instead of grabbing the element from the dom each loop, I just defined the elements at the top, and continued to reference the save variable.

instead of using a css keyframes animation, I used the css transition property to add animation to the changing of opacity.

If you have any questions, please ask /p>

let currentscene = 0;
const blue = document.getElementById("blue");;
const red = document.getElementById("red");;

function next() {
  currentscene++;
  if (currentscene % 2 == 0) {
    blue.classList.remove("opaque");
    red.classList.add("opaque");
  }
  else if (currentscene % 2 == 1) {
    red.classList.remove("opaque");
    blue.classList.add("opaque");
  }
}

.squareblue,
.squarered {
  height: 50px;
  width: 50px;
  position: absolute;
  opacity: 0;
  animation-fill-mode: forwards;
  transition: 1s;
}

.squareblue {
  top: 50px;
  background-color: blue;
}

.squarered {
  top: 100px;
  background-color: red;
}

.opaque {
  opacity: 1;
}

button {user-select: none}

<div2 id="blue" class="squareblue"></div2>
<div2 id="red" class="squarered"></div2>

<button class="button" onclick="next()">next</button>

Make a background fade in every time onclick

You can add a addEventListener('animationend', function() { ... }); to reset the animation so you can run it again.

It's also a good idea to keep your CSS into your CSS file and not write it as a strings in JavaScript. Now, we are adding a class to the element to do what we want.

function clientedetail() {

  var el = document.getElementById("guardadoC");

  el.innerHTML = "Guardado.";

  el.classList.add("animating");

  //This function runs when the CSS animation is completed

  var listener = el.addEventListener('animationend', function() {

    el.classList.remove("animating");

    //this removes the listener after it runs so that it doesn't get re-added every time the button is clicked

    el.removeEventListener('animationend', listener);

  });

}

@keyframes background-fade {

  0% {

    background-color: green;

  }

  100% {

    background-color: none;

  }

}

#guardadoC {

  padding:5px;

}

#guardadoC.animating {

  animation: background-fade 3s;

}

<button type="button" onclick="clientedetail()">click me</button>

<div id="guardadoC"></div>

Fade In / Fade Out background images without white background

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/

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

Make Background Fade Out/In