3

興味深い小さな問題...

段落 (単語) の子をループして、1 つずつ色を付けようとしています。

これは、個別の要素に単語を含むハードコードされた作業バージョンです: http://jsfiddle.net/JjRHT/25/

使用して

window.setInterval(function(){
$(".item:nth-child(1)").css("color", "#FFFFFF");
}, 1000);

私が試みていることを示すためだけに...明らかに行く方法ではありません!

そう - 段落の各子を選択できますか? そして、ループを適切に行うにはどうすればよいですか-少し遅れて...

スティーブン

編集：

テキストをCSSの準備が整った単語に分割するjqueryプラグインを見つけました：

<p class="word_split">Don't break my heart.</p>
<script>
$(document).ready(function() {
  $(".word_split").lettering('words');
});
</script>

生成されるもの:

<p class="word_split">
  <span class="word1">Don't</span>
  <span class="word2">break</span>
  <span class="word3">my</span>
  <span class="word4">heart.</span>
</p>
4

5 に答える 5

1

http://jsfiddle.net/JjRHT/38/

ここにこれは遅れています

編集：更新されたバージョン http://jsfiddle.net/JjRHT/38/

于 2012-09-11T11:47:33.590 に答える
1

ここでの主な問題は、段落の単語にスタイルを適用できないことです。

単語 (要素全体ではなく) に色を付けたい場合は、段落から単語を抽出する必要があります。

これにより、段落が 2 つの部分に分割され、各部分に異なる色が付けられます。

var tokens = $paragraph.text().split(' ');
var i=0;
window.setInterval(function(){
       i = (i+1)%tokens.length;
       $paragraph.html( '<span class=onecolor>'+tokens.slice(0, i).join(' ')+'</span>'
           + ' <span class=othercolor>'+tokens.slice(i, tokens.length).join(' ')+'</span>');
}, 1000);​

デモンストレーション: http://jsfiddle.net/CcBLr/1/

編集 ：

あなたの言葉に特定のものを作りたいと仮定すると（たとえば、あなたが言うように、さまざまな遅延）、準備のためにこれを行うことができます：

var tokens = $paragraph.text().split(' ');
var spans = tokens.map(function(t){return '<span>'+t+'</span>'});
$paragraph.html(spans.join(' '));
var $words = $paragraph.children('span');

$words段落の単語のコレクションになりましたが、それらにスタイルを適用できます。たとえば、これで：

$words.each(function(){
   var $word = $(this);
   setTimeout(
   ...
于 2012-09-11T11:44:51.497 に答える
0

あなたが要求したように、少し遅れて：

var delay = 300; // delay in milliseconds

$(".item").children().each(function(index) {
    setTimeout(function() {
        $(this).css("color", "#FFFFFF");
    }, index*delay);
});
于 2012-09-11T11:47:35.747 に答える
0

setIntervalは毎回関数を自己呼び出しするため、setIntervalで呼び出しているだけなので、ループする必要はありません。必要なのは、修飾子を増やすことだけです。

これをチェックしてくださいhttp://jsfiddle.net/JjRHT/39/

于 2012-09-11T11:48:50.690 に答える
0

var 時間 = 300;

$('.item').each(関数(インデックス) {

window.setInterval(function(){$(".item:nth-child("+(index+1)+")").css("color", "#FFFFFF");}, time*index); });

于 2012-09-11T11:59:45.340 に答える