3

一个有趣的小问题...

尝试遍历段落(单词)的子项并逐个着色。

这是一个硬编码的工作版本,其中包含单独元素中的单词:http: //jsfiddle.net/JjRHT/25/

使用

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

只是为了展示我正在尝试的东西......显然不是要走的路!

所以 - 我可以选择一个段落的每个孩子吗?以及如何正确执行循环-稍有延迟...

史蒂文

编辑:

我找到了一个 jquery插件,它可以将文本拆分为非常适合 css 的单词:

<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

这里的主要问题是您不能将样式应用于段落的单词。

如果要为单词(而不是整个元素)着色,则必须从段落中提取单词。

这会将段落分成两部分,并为每个部分赋予不同的颜色:

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 回答
1

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

这是延迟

编辑:更新版本 http://jsfiddle.net/JjRHT/38/

于 2012-09-11T11:47:33.590 回答
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

变量时间= 300;

$('.item').each(函数(索引) {

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

于 2012-09-11T11:59:45.340 回答