fading-in каждое слово абзаца в разном случайном временном эффекте

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/