0

jQueryで簡単な単語列表示プログラムを作ろうとしています。文を入力として受け取り、その出力を一連の単語で表示できる単純なプログラムを実現したいと考えています。

このプログラムにこれらの単語を以下のように順番に表示させるにはどうすればよいですか

 <div class="bar">One Two </div>  //(hide it after few seconds and show next line)
 <div class="bar">Three Four </div> //(hide it after few seconds and show next line)
 <div class="bar">Five Six </div> //(hide it after few seconds and show next line)
 <div class="bar">Seven </div> //(hide it after few seconds)

一度に順番に表示される単語の数は、私のプログラムで wordCount var を使用して構成できます

JSFiddle での私のプログラム

私はこれについて多くのオプションを試しましたが、常にdivの最後の単語「Seven」を表示しています。アニメーションは適切な時間機能しているように見えます。これは、JS がアニメーションの遅延を処理する方法に関係していると思われます。

これは、JavaScript がここで遅延をどのように処理しているかがよくわからないといういくつかの明確な理解に戻ると思います。

私は次のことを試みましたが、うまくいきませんでした - setTimeout - 遅延を伴う関数の呼び出し - jQuery.delay() 呼び出し

console.log メッセージを入れると、すべての単語が順番に表示されますが、div には常に最後の単語が含まれます。

JavaScript がアニメーションの完了を待っておらず、最後の単語に到達するのが早すぎて、アニメーションが後で続行されると思います。

見るコードの主な行は次のようになると思います

    $('.bar').fadeIn(1000).text(displayWords).fadeOut(1000);

これに関するヘルプと洞察をいただければ幸いです。

4

2 に答える 2

1

を使用して以下のバージョンを試してくださいsetInterval、

var words = $('.foo').text().split(' ');
var index = 0;
var wordCount = 3;

var showHide = setInterval(function () {
    var displayWords = "";

    var mx = index + wordCount;
    if (mx > words.length) mx = words.length;
    for (var i = index; i < mx; i++) {
        displayWords += words[i] + " ";
    }

    $('.bar').fadeIn(1000).text(displayWords).fadeOut(1000);
    index = mx;
    if (index > words.length) clearInterval(showHide);    
}, 2000);

デモ：http： //jsfiddle.net/9T4HE/15/

于 2013-03-18T19:28:16.300 に答える
0

jQuery.queue（）を見てください...

http://api.jquery.com/queue/

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

var div = $("div");
function runIt() {
    div.show("slow");
    div.animate({left:'+=200'},2000);
    div.slideToggle(1000);
    div.slideToggle("fast");
    div.animate({left:'-=200'},1500);
    div.hide("slow");
    div.show(1200);
    div.slideUp("normal", runIt);
}
function showIt() {
    var n = div.queue("fx");
    $("span").text( n.length );
    setTimeout(showIt, 100);
}
runIt();
showIt();

runIt（）メソッドはアニメーションをキューに追加し、showItメソッドはタイムアウトでキューを呼び出します。

上記のURLには、連続して実行されるさまざまなアニメーションのデモも表示されます。

HTH

于 2013-03-18T19:29:15.647 に答える