jquery - Jquery淡入/淡出动态文本

Question

我正在尝试遍历一个数组，并为每个数组淡出一个文本字段，填充它，然后将其淡入。

我不知道为什么这可能不起作用。

在我添加淡出之前一切正常。

我的 jQuery 是：

for (var i = 0; i < textarr.length; i++) {

    //$('#text' + i).html(textarr[i]); //this works with no fade

    $('#text' + i).fadeOut(function() {
        $(this).html(textarr[i]).fadeIn();
    });
}

http://jsfiddle.net/DKYN9/5/ <小提琴......如果你评论淡入淡出代码并取消评论上面的行，你会明白我的意思......谢谢大家

Answer 1

试试这个更新的小提琴

http://jsfiddle.net/DKYN9/8/

我将其更改为淡入淡出文本

var curIndex = 0;
$(document).ready(AddText);
function AddText(){    
    if(curIndex >= textarr.length) return;
    $('#text0').fadeOut("slow", function () {
        $(this).html(textarr[curIndex]).fadeIn("slow", function(){            
            curIndex++; 
            AddText();
        });
    });    
}

Answer 2

问题是，在你的淡出完成后i设置为 3。所以你必须添加一个闭包：

var textarr = new Array();
textarr[0] = "Hello, my name is Barry.";
textarr[1] = "I am a designer in Tokyo";
textarr[2] = "I like stuff.";
changetolang = "jp";

for (var i = 0; i < textarr.length; i++) {
    (function (index) {
        $('#text' + index).fadeOut("slow", function () {
            $(this).html(textarr[index]).fadeIn();
        });
    }(i));
}

http://jsfiddle.net/DKYN9/9/

另一种方法是返回具有正确范围的函数：

var textarr = new Array();
textarr[0] = "Hello, my name is Barry.";
textarr[1] = "I am a designer in Tokyo";
textarr[2] = "I like stuff.";

function fadeIn(i) {
 return function () {
   $(this).html(textarr[i]).fadeIn();
 };  
}

for (var i = 0; i < textarr.length; i++) {
    $('#text' + i).fadeOut("slow", fadeIn(i));
}

http://jsfiddle.net/DKYN9/12/