Need to change opacity : 0 to 1 slowly with animation using jquery

Question

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

[JQuery Builtin Fading function Tutorial](http://www.w3schools.com/jquery/jquery_fade.asp). — devRicher, Jan 11 '17 at 09:04
Possible duplicate of [How to do fade-in and fade-out with JavaScript and CSS](http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css) — devRicher, Jan 11 '17 at 09:04
I'd always recommend animating using CSS rather than JS, its much better for performance — James King, Jan 11 '17 at 09: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, Jan 11 '17 at 09:06

score 4 · Answer 1 · answered Jan 11 '17 at 09:16

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!

John Bupit · Accepted Answer · 2017-01-12T07:34:37.233

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.com/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;" />

score 1 · Answer 3 · answered Jan 11 '17 at 09:05

1

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

as stated in the docs, fadeTo takes following arguments:

.fadeTo( duration, opacity [, complete ] )

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

answered Jan 11 '17 at 09:05

pwolaq

6,343
19
45

I need to increase my opacity slowly with curtain open and decrease my opacity slowly with curtain close. – Maulik Jan 11 '17 at 09:22

score 0 · Answer 4 · answered Jan 11 '17 at 09:33

0

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

answered Jan 11 '17 at 09:33

Alex N.

56
4

score 0 · Answer 5 · answered Apr 22 '21 at 03:17

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

score -1 · Answer 6 · answered Jan 11 '17 at 09:07

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.com/200/200/') no-repeat center center;
  width: 200px;
  height: 200px;
  }

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

Need to change opacity : 0 to 1 slowly with animation using jquery

6 Answers6