Question

我使用两个函数来淡入/淡出元素。我知道这两个函数都能正常工作，当我在控制台中按顺序测试它们时，它们可以实现我想要的功能。

但是

fadeIn()
fadeOut()

似乎使它们同时执行。

function fadeIn(el) {
      el.style.opacity = 0;
      el.style.display = 'block';

      var tick = function() {

        el.style.opacity = +el.style.opacity + 0.01;


        if (+el.style.opacity < 1) {
          (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 2500)
        }
      };

      tick();
}

function fadeOut(el) {
  el.style.opacity = 1;

  var tickOut = function() {
    el.style.opacity = +el.style.opacity - 0.01;


    if (+el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tickOut)) || setTimeout(tickOut, 2500)
    }
    else if (+el.style.opacity === 0){
    el.style.display = 'none';
    }
  };

  tickOut();
}

链接到JsFiddle：https://jsfiddle.net/cwu9sg3h/

编辑：预期结果是引用淡入淡出然后淡出，然后它切换到淡入/淡出的另一个引用。它永远不会停止旋转引号。

编辑＃2：我不能在这个项目中使用jQuery！

Answer 1

当您在彼此之后立即呼叫fadeIn和fadeOut时，他们都会在下一帧// tick上注册他们的tick函数（取决于是否支持requestAnimationFrame。）

为了按顺序运行动画，您必须知道fadeIn何时结束，因此您可以开始淡出它。如果您在淡入后总是淡出，可以在fadeOut内拨打fadeIn，如下所示：

var f;
if (+el.style.opacity < 1) {
    f = tick;
} else {
    f = fadeOut;
}
(window.requestAnimationFrame && requestAnimationFrame(f)) || setTimeout(f, 2500)

因此，您可以使用此代替fadeIn中当前的if语句。

如果您希望fadeIn更可重复使用，则可以改为使用回调。

function fadeIn(el, callback) {
  el.style.opacity = 0;
  el.style.display = 'block';

  var tick = function() {

    el.style.opacity = +el.style.opacity + 0.01;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 2500)
    }else{
        callback(el)
    }
  };

  tick();
}

然后，您可以将其称为fadeIn(el, fadeOut);。

以下是其中的一个示例。

＆＃13;

function fadeIn(el, callback) {
  el.style.opacity = 0;
  el.style.display = 'block';

  var tick = function() {

    el.style.opacity = +el.style.opacity + 0.01;
    if (+el.style.opacity < 1) {
      (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 2500)
    }else{
        callback(el)
    }
  };

  tick();
}

function fadeOut(el) {
  el.style.opacity = 1;

  var tickOut = function() {
    el.style.opacity = +el.style.opacity - 0.01;


    if (+el.style.opacity > 0) {
      (window.requestAnimationFrame && requestAnimationFrame(tickOut)) || setTimeout(tickOut, 2500)
    }
    else if (+el.style.opacity === 0){
    el.style.display = 'none';
    }
  };

  tickOut();
}

var el = document.getElementById("quote");
var btn = document.getElementById("btn");
btn.addEventListener("click", function(){
  fadeIn(el, fadeOut);;
});

＆＃13;

/* The CSS isn't important here. */
q{background-color: yellow;opacity:0;}

＆＃13;

<q id="quote">"I'll appear and then disappear."</q><br>
<button id="btn">Click me to fade the quote in and out.</button>

＆＃13;

Answer 2

定义变量以引用requestAnimation次调用。在cancelAnimationFrame else内的fadeIn区块致电fadeOut。在fadeIn内致电displayTestimonials。在fadeOut cancelAnimationFrame阻止内致电fadeIn后致电else。在displayTestimonials fadeOut阻止内致电else。

似乎没有使用

nextIndex。替代

  nextIndex = randomNumber();
  while (currentIndex == nextIndex) {
    currentIndex = randomNumber();
  }

用于当前while循环。请注意，当前while循环不会阻止连续两次选择相同的元素。

    var testimonials = document.querySelectorAll('#testimonials span');
     //set a starting index of 0

     //Start displaying testimonials

    function randomNumber() {
      return Math.floor(testimonials.length * Math.random());
    }

    var index = randomNumber();

    displayTestimonial(index, fadeOut);

    function displayTestimonial(currentIndex) {
      //Check to see if we need to reset back to the first index
      nextIndex = randomNumber();
      while (currentIndex == nextIndex) {
        currentIndex = randomNumber();
      }
      console.log(testimonials[currentIndex]);
      //Display a testmonial and when testimonial is complete fade it out
      fadeIn(testimonials[currentIndex]);

      // callback(testimonials[currentIndex]);

    }

    function fadeIn(el) {
      el.style.opacity = 0;
      el.style.display = 'block';
      var raf;
      var tick = function() {

        el.style.opacity = +el.style.opacity + 0.01;


        if (+el.style.opacity < 1) {
          (window.requestAnimationFrame && (raf = requestAnimationFrame(tick))) || setTimeout(tick, 2500)
        } else {      
          cancelAnimationFrame(raf);
          console.log("fadeIn complete");
          fadeOut(el)
        }
      };

      tick();
    }

    function fadeOut(el) {
      el.style.opacity = 1;
      var raf1;
      var tickOut = function() {
        el.style.opacity = +el.style.opacity - 0.01;


        if (+el.style.opacity > 0) {
          (window.requestAnimationFrame && (raf1 = requestAnimationFrame(tickOut))) || setTimeout(tickOut, 2500)
        } else if (+el.style.opacity === 0) {
          // el.style.display = 'none';
          cancelAnimationFrame(raf1);
          console.log("fadeOut complete");
          index = randomNumber();
          displayTestimonial(index);
        }
      };

      tickOut();
    }

#testimonials {
  border-top: solid 1px #000;
  border-bottom: solid 1px #000;
  padding: 10px;
  text-align: center;
  margin: 10px;
}

#testimonials span {
  margin: 0;
  padding: 0;
}

#testimonials span {
  list-style-type: none;
  font-size: 24px;
  color: #001346;
  position: relative;
  margin: 0;
  animation: mymove 5s infinite;
  opacity: 1;
  animation-delay: 15s;
  /**ADD THIS TO CSS*/
  display: none;
}

#testimonials span a {
  display: block;
  padding: 5px;
  background-color: #EF681F;
  color: #FFF;
  margin-top: 5px;
  font-size: 16px;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
}

#testimonials span a:hover {
  text-decoration: none;
  background-color: #001346;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

#testimonials span {
  display: none;
}

<div id="testimonials">
  <span>"Testimonials can be very powerful for helping to establish trust and encouraging visitors to take whatever action you are after."
            <a href = "#">Register</a></span>
  <span>"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa."
            <a href = "#">Register</a></span>
  <span>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque."
            <a href = "#">Register</a></span>
</div>

jsfiddle https://jsfiddle.net/cwu9sg3h/12/

如何一次执行多个动画

2 个答案: