2

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!

Improve this question
4
  • 1
    Or you can use CSS to do it Commented Jun 9, 2016 at 20:13
  • Yes, but I need to learn good Javascript... Commented Jun 9, 2016 at 20:17
  • chrisbuttery.com/articles/fade-in-fade-out-with-javascript Commented Jun 9, 2016 at 20:44
  • I read that website but thanks anyway. Commented Jun 9, 2016 at 20:49

3 Answers 3

Reset to default
2

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

 });
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Wait, functions are called one after the other.
Yes. In your code you fade out then fade in instantly. Instead, you need to wait to run fadeIn until after fadeOut has completed. That is why I have a promise that resolves when the animation completes. So fadeOut runs, then when it has finished fading fadeIn runs.
Yes, but in other programming languages like Python, functions run sequentially sequentially. For example fadeOut() would finish before FadeIn() function starts.
Yes, they do run sequentially, but animation takes significant time. Simplest way I can describe it is that when you call fadeOut it kicks off the animation in the background then immediately runs fadeIn. That's not what you wan though, you want to wait for fadeOut to finish. That's why you need a promise or a callback to trigger the next function only after animation completes. Maybe research Promises and asynchronous programming in javascript.
Ok great I will. Thank you very much for your solution!
1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.