Question

我有这组淡入淡出的代码。我需要的是只要页面打开就一遍又一遍地重复它。

$(document).ready(function() {
    $('.one').fadeTo(500, 1);
    $('.one').fadeOut(500, 0, function(){
        $('.two').fadeTo(500, 1);
        $('.two').fadeOut(500, 0, function(){
            $('.three').fadeTo(500, 1);
            $('.three').fadeOut(500, 0, function(){
                $('.four').fadeTo(500, 1);
                $('.four').fadeOut(500, 0, function(){
                    $('.five').fadeTo(500, 1);
                    $('.five').fadeOut(500, 0, function(){
                        $('.six').fadeTo(500, 1);
                        $('.six').fadeOut(500,0);
                    }); 
                });
            });
        });
    });   
});

$(document).ready(main);

我想到了setInterval，它可以工作，但整个循环长达60秒，setInterval不会从0开始，但是在设置的时候。

在这种情况下，我必须将间隔设置为60000，然后在循环开始前等待整整一分钟。

有没有更简单的方法再次启动该功能？或者有没有办法将setInterval启动为0？

Answer 1

您只需从$document.ready()中提取匿名函数即可。然后，您将在$document.ready()内拨打一次，然后每隔60秒再次使用.setInterval()拨打电话，这就是您想要的。

我提供了一个概念证明，每隔5秒就会记录到控制台，作为您的起点：

＆＃13;

$(document).ready(function(loop) {
  loopFunction();
  window.setInterval(loopFunction, 5000);

});

var loopFunction = function(loop) {
  console.log('Runs every 5 seconds');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

Answer 2

您可以尝试使用递归函数来完成此任务。

function repeatFadeEffect(){
    $('.one').fadeTo(500, 1);
        $('.one').fadeOut(500, 0, function(){
            $('.two').fadeTo(500, 1);
            $('.two').fadeOut(500, 0, function(){
                $('.three').fadeTo(500, 1);
                $('.three').fadeOut(500, 0, function(){
                    $('.four').fadeTo(500, 1);
                    $('.four').fadeOut(500, 0, function(){
                        $('.five').fadeTo(500, 1);
                        $('.five').fadeOut(500, 0, function(){
                            $('.six').fadeTo(500, 1);
                            $('.six').fadeOut(500,0, function(){
                                // call your function again here or from where you want the process to restart
                                repeatFadeEffect();
                            });
                        }); 
                    });
                });
            });
        });   
    });
}


$(document).ready(function(){
    // call this function once to start the repeat effect.
    repeatFadeEffect();

    main();
});

不清楚是否要重复整个序列，但使用递归函数调用应该可以得到所需的结果。

Answer 3

这是一个简单的想法，它采用一系列类名。用选择器抓取元素会很容易（也许更好），但这应该易于使用。现在你抓住数组中的第一个元素，用它来淡化，然后把它放回到数组的末尾。它应该继续。

＆＃13;

var fades = ['.one', '.two', '.three', '.four', '.five', '.six']

function fade_el() {
  //grad element from array
  let el_index = fades.shift()

  // call fades 
  $(el_index).fadeTo(500, 1)
  $(el_index).fadeOut(500, 0, function() {
    // put element back at end of array
    fades.push(el_index)

    // recurse 
    fade_el()
  })
}

$(document).ready(fade_el)

＆＃13;

div {
  width: 100px;
  height: 100px;
  background-color: grey;
  margin: 10px;
  display: inline-block;
  opacity: 0
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>

＆＃13;

Answer 4

递归函数可能是执行此操作的最佳方法。将各种类拉出到一个数组中，并将衰落函数作为回调传递给fadeOut，并将下一个索引作为参数：

// Array of classes
var classes = ['one', 'two', 'three', 'four', 'five', 'six'];

// Fading function, takes the array index for the next class
function fadeFunc(classNum) {
  // Grab the element
  var elem = $('.' + classes[classNum]);
  // Fade in
  elem.fadeTo(500, 1, function () {
    // Fade out, passing fadeFunc the next index
    elem.fadeOut(500, 0, function () {
      fadeFunc((classNum + 1) % 6);
    });
  });
};
// Start with the first index
$(document).ready(function () {
  fadeFunc(0);
});

这是a working example。

我将如何反复运行此代码？

4 个答案: