0

配列をループして、それぞれに対してテキストフィールドをフェードアウトし、入力してからフェードインしようとしています。

これが機能しない理由がわかりません。

フェードアウトを追加するまで、すべて正常に動作します。

私の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/ < フィドル ... フェード コードにコメントを付けて、上の行のコメントを外すと、私が何を意味するかがわかります....みんなありがとう

4

2 に答える 2

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();
        });
    });    
}
于 2013-06-06T12:44:29.360 に答える
0

問題は、フェードアウトが完了した後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/

于 2013-06-06T13:10:42.187 に答える