这是我的功能。
function duplicate_step_through_highlighted (element_jq, target_jq, char_cb) {
console.log( element_jq);
var contents = element_jq.contents();
for (var i = 0 ; i < contents.length; ++i) {
// if text node, step
if (contents[i].nodeType === 3) {
// insert empty text node
var new_tn = document.createTextNode('');
target_jq.append(new_tn);
// iterate it
var text = contents[i].nodeValue;
for (var j = 0; j < text.length; j++) {
char_cb(text[j],new_tn);
new_tn.nodeValue += text[j];
// *** I want an async delay here ***
}
} else { // type should be 1: element
// target_jq gets a duplicate element inserted, copying attrs
var new_elem = $(contents[i].cloneNode(false)).appendTo(target_jq);
duplicate_step_through_highlighted($(contents[i]),$(new_elem),char_cb);
// then a recursive call is performed on the newly created element as target_jq
// and the existing one as element_jq. char_cb is passed in
}
}
}
我正在做的是通过一次重建一个字符来重建 HTML 元素。这样做有一个很好的理由,我想要它“输入”的视觉效果。
所以现在没有延迟,所以我的元素立即被复制。我已经检查结果是否一致,但我越来越清楚,我可能需要完全重写功能,以便能够在插入每个字符后插入异步延迟。
我是否需要重写它并有一个堆栈来跟踪我在元素中的位置?
你可能想看看我最近的answer https://stackoverflow.com/a/11657799/1048572 or 这个旧的 https://stackoverflow.com/a/10237157/1048572 (Demo http://jsfiddle.net/pZb8W/2/),关于如何实现这样的效果。
提示:不要将元素克隆到新元素中,只需隐藏它们并使它们逐个显示即可。
另外,除了原生 DOM 元素之外,根本不处理 jQuery 实例可能会更容易。所以是的,重写可能会做:-)而且我认为它也确实需要一个堆栈。
function animate(elements, callback) {
/* get: array with hidden elements to be displayes, callback function */
var i = 0;
(function iterate() {
if (i < elements.length) {
elements[i].style.display = "block"; // show
animateNode(elements[i], iterate);
i++;
} else if (callback)
callback();
})();
function animateNode(element, callback) {
var pieces = [];
if (element.nodeType==1) {
while (element.hasChildNodes())
pieces.push(element.removeChild(element.firstChild));
setTimeout(function childStep() {
if (pieces.length) {
animateNode(pieces[0], childStep);
element.appendChild(pieces.shift());
} else
callback();
}, 1000/60);
} else if (element.nodeType==3) {
pieces = element.data.match(/.{0,2}/g); // 2: Number of chars per frame
element.data = "";
(function addText(){
element.data += pieces.shift();
setTimeout(pieces.length
? addText
: callback,
1000/60);
})();
}
}
}
animate($("#foo").children());
jsfiddle.net 上的演示 http://jsfiddle.net/y9PJg/24/
怎么运行的:
- The
addText
函数向当前文本节点添加一些字符,并为其自身设置超时 - 动画!如果一切都完成了,它会调用callback
功能。
-
childStep
在子节点上运行动画,并将其自身作为回调传递,直到没有子节点离开 - 然后调用callback
功能。
- 两者一起,
animateNode
递归地遍历节点树并按顺序对文本节点进行动画处理。
- the
iterate
函数调用animateNode
(在解除它们之后)在所有输入元素上,通过将其自身作为回调传递。所有输入元素完成后,它调用外部callback
这是作为第二个参数给出的animate
.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)