CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Maulik
Maulik

Reputation: 379

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

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

Upvotes: 2

Views: 8635

Answers (6)

N-ate
N-ate

Reputation: 6933

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

Upvotes: 0

John Bupit
John Bupit

Reputation: 10618

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

Upvotes: 2

Alex N.
Alex N.

Reputation: 56

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

Upvotes: 0

hairmot
hairmot

Reputation: 2975

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!

Upvotes: 4

Justinas
Justinas

Reputation: 43479

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>

Upvotes: -1

pwolaq
pwolaq

Reputation: 6381

$(".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

Upvotes: 1

Related Questions