无限循环淡入淡出

Question

我需要无限重复这个函数谁能告诉我解决办法

function AnimeRate(x, z, w){
    x.fadeIn(2000, function(){
        x.fadeOut(2000, function(){
            z.fadeIn(2000, function(){
                z.fadeOut(2000, function(){
                    w.fadeIn(2000);
                })
            })
        });
    });
}

谢谢

Answer 1

可以使用.promise()、.then()；在 .ready() 处理程序中移动 AnimeRate 函数；在递归调用 AnimeRate

之前在 w 元素上调用 .fadeOut(0)

$(document).ready(function() {
  function AnimeRate() {
    return w.fadeOut(0).promise().then(function() {
      return x.fadeIn(2000).promise().then(function() {
        return x.fadeOut(2000).promise().then(function() {
          return z.fadeIn(2000).promise().then(function() {
            return z.fadeOut(2000).promise().then(function() {
              return w.fadeIn(2000).promise().then(function() {
                this.fadeOut(0).promise().then(AnimeRate)
              });
            })
          })
        })
      })
    })           
  }

  var x = $('.excellent');
  var z = $('.tresBon');
  var w = $('.bon');
  $(x, z, w).fadeOut(0);
  AnimeRate();
});

jsfiddle https://jsfiddle.net/9rn45k43/5/

无限循环淡入淡出

Loop FadeIn FadeOut Infinite

javascript

loops

fadeout

fadein