I am dealing with animation which includes curtain open and close animation. In that, I used jquery for curtain open and close effect. But I want to change my background opacity when curtain open and close.

For example, I want to change my background image opacity 0 to 1 slowly as per my curtain is opening and similarly, I want to change my background image opacity 1 to 0 slowly when my curtain is closing.

My HTML is as follow :

<div class="container-fluid bgauto"style="opacity:1;">
    <img src="img/yc.jpg" id="curtain1a" style="max-width:50%;">
    <img src="img/yc.jpg" id="curtain2a" style="max-width:50%;">
</div>

<img id="tfanonoff" class="img-responsive" src="img/fanicon.png" style="max-width:3%;cursor:pointer;"/>

My Jquery is as follows :

$(function () {
    var hits = 0;
    $('#onoff').click(function () {
        if (hits % 2 !== 0) {
            $("#curtain1a").animate({ width: 200 }, 2000);
            $("#curtain2a").animate({ width: 191 }, 2000, function () { $(".bgauto").fadeTo({ 'opacity': '1' }, 1000); });
        }
        else {
            $("#curtain1a").animate({ width: 30 }, 2000);
            $("#curtain2a").animate({ width: 30 }, 2000, function () { $(".bgauto").css({ 'opacity': '0.8' }, 1000); });
        }
        hits++;
        return false;
    });
});

I am dealing with animation which includes curtain open and close animation. In that, I used jquery for curtain open and close effect. But I want to change my background opacity when curtain open and close.

For example, I want to change my background image opacity 0 to 1 slowly as per my curtain is opening and similarly, I want to change my background image opacity 1 to 0 slowly when my curtain is closing.

My HTML is as follow :

<div class="container-fluid bgauto"style="opacity:1;">
    <img src="img/yc.jpg" id="curtain1a" style="max-width:50%;">
    <img src="img/yc.jpg" id="curtain2a" style="max-width:50%;">
</div>

<img id="tfanonoff" class="img-responsive" src="img/fanicon.png" style="max-width:3%;cursor:pointer;"/>

My Jquery is as follows :

$(function () {
    var hits = 0;
    $('#onoff').click(function () {
        if (hits % 2 !== 0) {
            $("#curtain1a").animate({ width: 200 }, 2000);
            $("#curtain2a").animate({ width: 191 }, 2000, function () { $(".bgauto").fadeTo({ 'opacity': '1' }, 1000); });
        }
        else {
            $("#curtain1a").animate({ width: 30 }, 2000);
            $("#curtain2a").animate({ width: 30 }, 2000, function () { $(".bgauto").css({ 'opacity': '0.8' }, 1000); });
        }
        hits++;
        return false;
    });
});

• javascript
• jquery
• html
• css

• provide a working example – Jishnu V S Commented Jan 11, 2017 at 9:02
• JQuery Builtin Fading function Tutorial. – devRicher Commented Jan 11, 2017 at 9:04
• 1 Possible duplicate of How to do fade-in and fade-out with JavaScript and CSS – devRicher Commented Jan 11, 2017 at 9:04
• I'd always remend animating using CSS rather than JS, its much better for performance – James King Commented Jan 11, 2017 at 9:06
• You should not use jQuery for that. Use native CSS animatons. The jQuery part in your example is to just add/remove class on the element. – plvice Commented Jan 11, 2017 at 9:06

6 Answers 6

Just posting the css solution as noone else appears to have posted it.

.fadableElement {
   opacity: 1;
   transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -webkit-transition: opacity 2s ease-in-out;
   }

.fadeOut {
    opacity:0;
}

The element you wish to fade out should be initialised with the fadableElement class

<div class="fadableElement" id="onoff"></div>"

When you want to fade it out, just use javascript to add the class fadeOut.

$('#onoff').addClass('fadeOut');

Remove the class to fade it back in!

You can use the fadeTo() function. Also, since you need the effects simultaneously, don't place it in a callback.

$(function() {
  var hits = 0;
  $('#onoff').click(function() {
    if (hits % 2 !== 0) {
      $("#curtain1a").animate({
        width: 200
      }, 2000);
      $("#curtain2a").animate({
        width: 191
      }, 2000);

      $(".bgauto").fadeTo(1000, 1);

    } else {
      $("#curtain1a").animate({
        width: 30
      }, 2000);
      $("#curtain2a").animate({
        width: 30
      }, 2000);

      $(".bgauto").fadeTo(1000, 0);
    }
    hits++;
    return false;
  });
});

.bgauto {
  background-color: #aaa;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid bgauto">
  <img src="https://placehold.it/100x100" id="curtain1a" style="max-width:50%;">
  <img src="https://placehold.it/100x100" id="curtain2a" style="max-width:50%;">
</div>

<img id="onoff" class="img-responsive" src="https://placehold.it/100x100" style="max-width:3%;cursor:pointer;" />

$(".bgauto").fadeTo({'opacity':'1'},1000);

as stated in the docs, fadeTo takes following arguments:

.fadeTo( duration, opacity [, plete ] )

so in your case it should look like this:

$(".bgauto").fadeTo(1000, 1);

however, this could be done with pure css so I suggest you consider doing that

Taking in account pure-css solution, posted by hairmot, you can avoid jQuery pletely using native element.classList.add(), .remove() or .toggle() methods.

I tested this in Firefox. This is the new javascript animate API. It uses the same engine as CSS under the hood.

document
   .querySelector(".class-name")
   .animate({ opacity: [0, 1] }, { duration: 2000, iterations: 1, easing: "ease-in" })
   .onfinish = (e) => {
        e.target.effect.target.style.opacity = 1;
   };

Use .fadeIn and .fadeOut functions in jQuery

$(document).ready(function () {
  setTimeout(function () {
    $('.background').fadeOut();
  }, 1000);

  setTimeout(function () {
    $('.background').fadeIn();
  }, 3000);
});

.background {
  background: url('http://lorempixel./200/200/') no-repeat center center;
  width: 200px;
  height: 200px;
  }

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>