CODEWITHSUNDEEP
javascriptjqueryhtmlfadeinfadeout
user5615311
user5615311

Reputation:

JavaScript image fade out and in (using only JavaScript, no jQuery)

I am trying to make an image to fade out and then in. The problem is that when I use two functions, the image doesn't fade out but it immediately disappears. Is there anyone with amazing JavaScript skills to solve my problem?

Please do not tell me about jQuery because I already know how to do it using it, I only need to improve my JavaScript skills.

PS: I need also to understand why it doesn't work and how to make it work with as much details please.

Here is my code: 

var el = document.getElementById("img1");
el.addEventListener("click", function() {
   function fadeOut() {
      el.style.opacity = 1;
      function fade(){
         var val = el.style.opacity;
         if ((val -= .01) > 0){
           el.style.opacity = val;
           requestAnimationFrame(fade);
         }
      }
     fade();
   };

   function fadeIn() {
      el.style.opacity = 0;
      function fade1() {
        var val = el.style.opacity;
        if ((val += .01) < 1){
           el.style.opacity = val;
           requestAnimationFrame(fade1);
        }
      }
     fade1();
   };

   fadeIn();
   fadeOut();

 });

Thank you!

Upvotes: 2

Views: 2270

Answers (3)

natwaalf twaalf
natwaalf twaalf

Reputation: 105

Voor de fade in:

Function FadeIn() {
  var milli = 3000; //duration
  el = yourelement;
  el.style.opacity = 1;
  var a = 1 / (milli / 1000 * 16); //the -x 
  FadeIn_loop(a);
}

Function FadeIn_loop(a) {
  if (el.style.opacity > 0.01) {
    el.style.opacity = el.style.opacity - a;
    setTimeout("FadeIn(" + el + ")", 16); //about 1/60 a second
  } else {
    el.style.opacity = 0;
  }
}

Same thing for fade out, succes!

In your code are many things that does'nt seem to be right. First of get all those functions out of each other otherwise requestAnimationframe cant find the functions.

Upvotes: 0

gaetanoM
gaetanoM

Reputation: 42044

My proposal is:

  • start animation with fadein
  • when fadein finishes start the fadeout

var el = null;

function fadeIn(timestamp) {
  var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity;
  if ((val -= .005) > 0) {
    el.style.opacity = val;
    window.requestAnimationFrame(fadeIn);
  } else {
    window.requestAnimationFrame(fadeOut);
  }
}

function fadeOut(timestamp) {
  var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity;
  if ((val += .005) < 1) {
    el.style.opacity = val;
    window.requestAnimationFrame(fadeOut);
  }
};

window.onload = function () {
  el = document.getElementById('img1');
  el.addEventListener('click', function(e) {
    window.requestAnimationFrame(fadeIn);
  });
}
<img id="img1" src="http://www.loc.gov/pictures/static/data/highsm/banner.jpg">

Upvotes: 1

Rob Louie
Rob Louie

Reputation: 2671

Still not the prettiest, but I have made just the minimum changes to your code to make it work: http://codepen.io/rlouie/pen/BzjZmK

First, you're assigning the opacity value back and forth repeatedly for no reason, which makes the code confusing to follow and also results in string concatenation instead of addition or subtraction, I have simplified this. Second, the functions were named the opposite of what they did, also confusing and fixed by me here. Finally, you ran both functions one after the other, so the second function set opacity to zero and then broke. Instead, I use a promise in your first function and resolve it when the animation completes.

That way the second function does not run until after the first one has completed animating.

var el = document.getElementById("img1");
el.addEventListener("click", function() {
   function fadeOut() {
      return new Promise(function (resolve, reject) {
      let opacity = 1;
      function fade(){
         if ((opacity -= .01) > 0){
           el.style.opacity = opacity;
           requestAnimationFrame(fade);
         } else {
           resolve();
         }
      }
     fade();
     });
   };

   function fadeIn() {
      let opacity = 0;
      function fade1() {
        if ((opacity += .01) < 1){
           el.style.opacity = opacity;
           requestAnimationFrame(fade1);
        }
      }
     fade1();
   };

   fadeOut().then(fadeIn);

 });

Upvotes: 2

Related Questions