0

私はJavaScriptとJQueryにかなり慣れていません。forループを使用して互いに回転させようとしている段落に一連の終わりを書きました。フェードの数は表示されていますが、サイトのテキストは変更されていません。

コードは次のとおりです。

var paragraphs = ["foo", "bar", "foobar"];

var rotateText = function(){
    for(var i = 0; i < paragraphs.length; i++){
        $("#id").text(paragraphs[i]).fadeIn(2000).delay(2000).fadeOut(2000);
    }
};

rotateText();
4

2 に答える 2

0

ここにはいくつかの問題があります。

  1. .text標準のアニメーション効果キューを尊重しません
  2. キューを使用すると、 iwill の値が 3 に増加するため、コールバックでは使用できません。

.queueこれは、 の値を引数として使用する関数を介してそれ自体が作成されるコールバックを介して変更されるテキストを追加することで解決されるiため、そのままローカルで使用できます。すべて言った：

for (var i = 0; i < paragraphs.length; i++){
    $("#id").queue((function (i) {
        return function () {
            $(this).text(paragraphs[i]).dequeue();
        };
    })(i)
    ).fadeIn(2000).delay(2000).fadeOut(2000);
}

実際に見てみましょう:

http://jsfiddle.net/ExplosionPIlls/gBxgQ/

于 2013-02-06T05:50:26.190 に答える
0

これを試して ：

これにより、テキストが循環的に出力されます: foo-bar-foobar-foo-bar ..

var faderIndex = 0,

paragraphs = ["foo", "bar", "foobar"];
function nextFade() {
    $('#id').text(paragraphs[faderIndex]).fadeOut(1000, function() {
        faderIndex++;
        if (faderIndex >= paragraphs.length)
            faderIndex = 0;
        $('#id').text(paragraphs[faderIndex]).fadeIn(1000, nextFade);
    });
}
nextFade();

<div id="id"></div>

デモ : JSFiddle での作業デモ

も参照してください：このSOの質問

于 2013-02-06T06:00:46.573 に答える