Question

我试图使图像淡出然后进入。问题是当我使用两个函数时，图像不会淡出但它会立即消失。是否有人有惊人的JavaScript技能来解决我的问题？

请不要告诉我有关jQuery的信息，因为我已经知道如何使用它，我只需要提高我的JavaScript技能。

PS：我还需要了解它为什么不起作用，以及如何让它与更多细节一起工作。

这是我的代码：

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

 });

谢谢！

Answer 1

仍然不是最漂亮的，但我只对代码进行了最小的更改才能使其正常工作：http://codepen.io/rlouie/pen/BzjZmK

首先，你无缘无故地反复分配不透明度值，这使得代码容易混淆并导致字符串连接而不是加法或减法，我简化了这一点。其次，这些功能被命名为与他们所做的相反，也让我感到困惑和固定。最后，你一个接一个地运行这两个函数，所以第二个函数将不透明度设置为零，然后打破。相反，我在第一个函数中使用promise并在动画完成时解析它。

这样第二个函数直到第一个函数完成动画后才会运行。

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

 });

Answer 2

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

淡出，成功同样的事情！

在你的代码中有很多东西似乎不对。首先得到所有这些函数，否则requestAnimationframe无法找到函数。

Answer 3

我的建议是：

使用fadein
当fadein结束时开始淡出

＆＃13;

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

＆＃13;

<img id="img1" src="http://www.loc.gov/pictures/static/data/highsm/banner.jpg">

＆＃13;

JavaScript图像淡出和淡入（仅使用JavaScript，没有jQuery）

3 个答案: