javascript - 如何无限次淡出和淡入数组的值？

Question

我想在无限次迭代数组期间应用fadeOut当前一个(50毫秒)和fadeIn下一个(500毫秒) (我希望这个事件每 3000 毫秒发生一次)。

我用这个搜索了一些相关主题，但我找不到合适的主题。

这是我的代码

var names = ["Mina","Minaming","Minami","HelloMina"];
var says = ["hello 1", "hello 2", "hello 3", "hello 4"];

function display(arg, arr){
    $(arg).html(arr[0]);
  
    var i = 1;
    setInterval(
      function(){
        $(arg).html(arr[i]);

        i++;
        if(i >= arr.length) i = 0;
    },3000);
}

display($('#career'), names);
display($('#saying'), says);

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

<div id="career"></div>
<div id="saying"></div>

这是 jsfiddle 示例。 http://jsfiddle.net/tjAa6/118/

Answer 1

试试这个:

var names = ["Mina", "Minaming", "Minami", "HelloMina"];
var says = ["hello 1", "hello 2", "hello 3", "hello 4"];

function display(arg, arr) {
  $(arg).html(arr[0]);

  var i = 1;
  setInterval(function() {
    $(arg).fadeOut(50, 'linear', function() {
      $(arg).html(arr[i]).fadeIn(100);
      i++;
    });
    if (i >= arr.length) i = 0;
  }, 3000);
}
display($('#career'), names);
display($('#saying'), says);

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

希望对你有帮助:)