Question

我有一系列的单词，我想逐渐淡出和淡入淡出。我是JS的新手，我无法弄明白。

我的代码如下：

animate_loop = function(){
        var showText = ["Security","Mobile/Wireless","Cloud/Database","PC/Storage"]
        $.each(showText, function(i, val) {
        setTimeout(function() {
            $('#animate').fadeOut("slow", function() {
                $(this).text(val).fadeIn("slow");
            });
        }, i * 3000);
        });

setInterval(function(){animate_loop();},5000)

使用此代码，函数非常快地遍历数组showText，我想知道是否有其他方法没有setInterval来实现这一点。可能只是无限地调用animate_loop函数，我认为这是不可取的。所以欢迎任何建议。

Answer 1

没有setInterval的其他方法

是的，我在这里所做的就是使用回调来保持一个恒定的链运行。基本上是fadeIn / fadeOut，在fadeOut上重新运行。

$(function () {

  var showText = ["Security","Mobile/Wireless",
  "Cloud/Database","PC/Storage"];

  var 
    showNum = 0,
    $showText = $('.showtext');

  function doShow() {
    $showText.text(showText[showNum]);
    $showText.fadeIn('slow', function () {
      $showText.fadeOut('slow', function () {
        //lets make it so it wraps back to the start
        showNum = (showNum + 1) % showText.length; 
        doShow();
      });
    });
    
  }
  
  doShow();
});

.showtext {
  font-size: 24pt;
}

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

重复调用函数以淡入和淡出JQuery

1 个答案: