我试图以随机的速度淡入段落的每个单词,以便它产生出现在纸上的单词的效果。我正在使用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>
另一种方法是使用 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/