只在屏幕上输入动画场景和一个接一个的元素(jQuery)

Question

如何使jquery中的键入效果只对当前显示在屏幕上的元素进行动画处理(由于html文件包含许多元素，但大多数元素将被隐藏，并且只有一些元素在一个场景<span id>中一次显示一个(；h1>首先只显示渐变在动画中，然后在动画完成后，第一个<p>显示为键入动画，然后跟随下一个<p>之后(然后还有第三段、第四段、第五段，如果它们存在的话(？

<!-- 1. Scene: #dense-jungle brought to the screen -->
<span id="dense-jungle">
<!-- 2. <h3> fadeIn -->
<h3>Dense Jungle</h3>
<!-- 3. The first <p> gets texted with typing/typewriter animation -->
<p>The jungle is so green.</p>
<!-- 4. The next <p> gets texted after the first -->
<p>There is a path.</p>
<!-- 5. And if another followed <p> does also exist in the scene -->
</span>

Answer 1

我发现有了这个，你可以(使用CSS(为屏幕上的元素设置不同的样式。但我需要的是排队输入段落动画的打字效果，而不是破坏单词结构的效果。

在CSS中：.span-0｛显示：块；位置：相对；-webkit变换：旋转(-1deg(；｝.span-1｛显示：块；位置：相对；-webkit变换：缩放(1.11(平移Y(0.02em(旋转(2deg(；｝.span-2｛显示：块；位置：相对；-webkit变换：平移Y(-0.04em(旋转(0deg(；｝

使用JS:

var processTextNodes = function(element, fn){
var children = element.childNodes;
for (var i = children.length; i --> 0;){
var node = children[i];
var type = node.nodeType;
if (type == 1) processTextNodes(node, fn);
if (type == 3) fn.call(this, node);
}
}
// Styling p>span divided into 20 section
$(function(){
$("p").each(function(){
processTextNodes(this, function(node){
var txt = node.nodeValue.replace(/s+/g, '‎‎‎ ').split('');
var spans = [];
while (txt.length){
var tempAr = [];
tempAr[tempAr.length] = txt.shift();
var charsFound = (tempAr[tempAr.length - 1] !== " ");
while (txt[0] === " "){
tempAr[tempAr.length] = txt.shift();
}
if (!charsFound){tempAr[tempAr.length] = txt.shift();}
spans[spans.length] = tempAr.join("");
}
var parent = node.parentNode;
for (var i = 0, len = spans.length; i < len; i++ ){
var span = spans[i];
parent.insertBefore($('<span class="added">' + span + '</span>')[0], node);
}
parent.removeChild(node);
});
$("span.added", this).each(function(index){
$(this).addClass("span-" + (index % 20));
});
});
});