使用带有无限循环的jQuery / Javascript淡化文本

Question

我目前正在建立一个网站，并希望以一定的间隔和一定的衰落时间以无限循环淡化几个单词。这正是我想要实现的目标：

我已经想出了这个，但是不知道如何延长每个单词的显示时间而与衰落时间无关，所以它看起来像是在gif上。

var text = ['fade1', 'fade2', 'fade3'];
var counter = 0;
var elem = document.getElementById("fade");
function change() {
  jQuery(elem).fadeTo(1400, 0, function() {
    this.innerHTML = text[counter];
    counter = ++counter % text.length;
    jQuery(this).fadeTo(1400, 1, change)
  })
}
change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade"></span></p>

Answer 1

您可以使用jQuery.delay暂停代码一定的毫秒数，然后再转到下一个代码：

var timeOnEachText = 2000; // Milliseconds to spend on each before moving to next

var text = ['fade1', 'fade2', 'fade3'];
var counter = 0;
var elem = document.getElementById("fade");
function change() {
  jQuery(elem).delay(timeOnEachText).fadeTo(1400, 0, function() {
    this.innerHTML = text[counter];
    counter = ++counter % text.length;
    jQuery(this).fadeTo(1400, 1, change)
  })
}
change()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Text <span id="fade"></span></p>

Answer 2

如果您只想更改间隔，可以将文本数组转换为数组对象并为其添加一些值，如下所示：

    $scope.$watch('mddate', function (newValue, oldValue) {
        console.log('oldValue=' + oldValue);
        console.log('newValue=' + newValue);
        //do something
    });

var text = [
  {
    text: 'fade1',
    fadeIn: 1000,
    fadeOut: 500,
    timeout: 100,
  },
  {
    text: 'fade2',
    fadeIn: 1100,
    fadeOut: 1500,
    timeout: 1000,
  },
  {
    text: 'fade3',
    fadeIn: 500,
    fadeOut: 300,
    timeout: 3000,
  }
];
var counter = 0;
var fadeTimeout = 0;
var elem = document.getElementById("fade");
function change() {
  var currentTextItem = text[counter];
  setTimeout( () => {
    jQuery(elem).fadeTo(currentTextItem.fadeIn, 0, function() {
      this.innerHTML = currentTextItem.text;
      counter = ++counter % text.length;
      jQuery(this).fadeTo(currentTextItem.fadeOut, 1, change)
    });
    
    // Set new timeout because in this set up the next item
    // controls the timeout of the previous one.
    fadeTimeout = currentTextItem.timeout;
  }, fadeTimeout );
}
change()

Answer 3

我不知道它是否对您有用，但您是否考虑过使用@keyframes而只是隐藏以不同的间隔显示图像？如果你知道手头的数据和图像的数量，你可以设置关键帧，它会显示得更好。