以不同的随机时间效果淡入段落的每个单词

Question

我正在尝试以随机速度淡入段落中的每个单词，以便产生单词出现在纸上的效果。我正在使用 jquery 并以这种方式进行。但是这个接缝很重（是这样吗？）。请提出更好的方法。

$('body').children('.word').each(function() {
  $(this).animate({
    "opacity": "1"
  }, Math.floor(Math.random() * 3000) + 500);
});

.word {
  opacity: 0;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="word">
  hello,
</div>
<div class="word">
  how
</div>
<div class="word">
  are
</div>
<div class="word">
  you
</div>
<div class="word">
  doing
</div>

Answer 1

另一种方法是使用 css 转换

JS：

$('body').children('.word').each(function() {
    var word = this;
    setTimeout(function () {
        $(word).css("opacity", 1);
    }, Math.random() * 3000)
});

CSS:

.word {
  opacity: 0;
  display: inline-block;
  transition: opacity 1s linear;
}

http://jsfiddle.net/n427mLb8/

您可以像这样使用 javascript 来避免在每个单词周围使用包装器：

$('.content').html($('.content').text().split(/[\s,\.]+/).map(function (word) {
    return '<div class="word">' + word + '</div>'
}).join(''))

http://jsfiddle.net/6e948j26/

以不同的随机时间效果淡入段落的每个单词

fading-in every word of a paragraph in different random time effect

javascript

css

jquery

fadein