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/＆lt;小提琴...你会看到我的意思，如果你评论淡入淡出的代码并取消注释上面的行....谢谢你们

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/

Jquery fadein / out on动态文本

2 个答案: