JQuery的 - 动画innerHTML可能吗？

问题描述

I'm trying to have a function that does setTimeout, then changes the innerHTML:

问题：我如何为显示的新文字设置动画效果，按照行，而不是一次写入？

<script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ document.getElementById("middlecolor").innerHTML='new text new text'; }, 1000); });</script>

感谢您的任何建议!!

Question: How could I animate the new text that appears, i.e. line by line as opposed to being written all at once?

推荐答案

一行一行有点棘手，但。

解决方案

p>

Line-by-line is a bit tricky, but possible.

var ps = document.getElementById("text").children;
var i = 0;
var $p = $(ps[i]);

setTimeout(function newline(){
$p.css("height", function(index, h){
    h = parseInt(h);
    h += parseInt($p.css("line-height"));
    console.log(h,  ps[i].scrollHeight);
    if (h > ps[i].scrollHeight)
        $p = $(ps[++i]);
    return h;
});
if (i < ps.length)
    setTimeout(newline, 200);
}, 200);​

我会建议使用打字机效果，这也是非常可爱的：

I'd suggest to use a typewriter effect, which is also very likable: http://jsfiddle.net/pZb8W/1/

var ps = document.getElementById("text").children;
var i = 0;
var $p, text;
var speed = 20;

setTimeout(function newchar(){
if (!text) {
    $p = $(ps[i++]);
    text = $p.text();
    $p.empty().show();
}
$p.append(document.createTextNode(text.charAt(0)));
text = text.slice(1);
if (text.length || i < ps.length)
    setTimeout(newchar, Math.random()*speed+speed);
}, 3*speed);​

这篇关于JQuery的 - 动画innerHTML可能吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！