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

Question

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

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

这是我的代码

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>

希望对您有所帮助:)

Answer 2

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(function() {
$(arg).html(arr[i]);
i++;
if(i >= arr.length) i = 0;
$(arg).fadeIn();
});
$(arg).fadeOut();    
},3000);
}
display($('#career'), names);
display($('#saying'), says);

我测试了它。感谢您仔细阅读。