0

私はこのコードを持っています。私がやろうとしているのは、テキストから「フェードイン フェードアウト」効果を出すことですが、fadeIn フェードアウトを行うたびに、テキストが置き換えられます (p id="string" に表示されます)。次の配列値を使用しますが、毎回最後の値を表示します (名前 3 - メッセージ 3)。

以下のhtmlコード：

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
    var str = $("#string").text().split(' + ');
    setInterval(function(){
        s++;
        for (var s = 0; s < str.length; s++) {
            var string = str[s];
            $("#string").html(string);
            $("#string").fadeIn(500);
            $("#string").fadeOut(3000);
        }   
    }, 6000);
});
</script>
</head>
<body>
<p id="string" style="display:none;">Name 1 - Message 1 + Name 2 - Message 2 + Name 3 - Message 3</p>
</body>
</html>

ありがとうございます。

4

2 に答える 2

1

目的を達成するためにループは必要ありません。

var placeholder = $("#string");
var words = placeholder.text().split(' + ');
var index = 0;
window.setInterval(ShowCurrentWord, 6000);
ShowCurrentWord();
function ShowCurrentWord() {
    var currentWord = words[index];
    placeholder.html(currentWord).fadeIn(500).fadeOut(3000);
    index = (index + 1) % words.length;
}

ライブ テスト ケース。

詳細: 現在のインデックスをグローバル変数に格納し、そのインデックスを使用して関数を実行するたびにインクリメントします。また、最初に関数を呼び出す必要があることに注意してください。そうしないと、最初の項目が表示されるまで 6 秒待機します。

于 2013-10-14T15:01:59.180 に答える