Jquery - Animate innerHTML possible?

Question

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?

Thanks for any suggestions!!

Prang

Yes. Don't use .innerHTML. Take a look at this: #1520678 – Loanloanda

would I do animate.setTimeout? or put jquery html() inside an animate script? – Prang

Answer 1

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);​

Tavern

Answer 2

Try something like this:

<div id="text">
</div>

$(document).ready(function () {
    var interval = setInterval(function () {
        $('#text').append('<p style="display: none;">new text</p>');
        $('#text p:last').fadeIn('slow');
    }, 5000);
});

See the example here

If you want to kill the interval, can be doing this:

clearInterval(interval);

Greatings.

Drill

One problem though,,,HOW do I get it to stop!? jsfiddle.net/dankpiff/7Jve8/4 – Prang

You need to kill the interval, doing something like this: clearInterval(interval) ... the "interval pointer" is stored in the interval variable. – Drill

Answer 3

Here's a function that would animate in multiple lines of text, one after the other:

<script type="text/javascript">
$(document).ready(function(){

function animateAddText(id, text, delta) {
    var lines = text.split("\n");
    var lineCntr = 0;
    var target = $("#" + id);

    function addLine() {
        if (lineCntr < lines.length) {
            var nextLine = "";
            if (lineCntr != 0) {
                nextLine = "<br>";
            }
            nextLine += lines[lineCntr++];
            $("<span>" + nextLine + "</span>").hide().appendTo(target).fadeIn(1000);
            setTimeout(addLine, delta);
        }
    }
    addLine();
}

var multilineText = "First line\nSecond Line\nThird Line\nFourth Line\nFifth Line";
animateAddText("middlecolor", multilineText, 1000);

});
</script>

And a working demo: http://jsfiddle.net/jfriend00/Gcg5T/

Airless

Thanks, I'm having trouble getting this to work though: jsfiddle.net/dankpiff/2AtwM – Prang

Get the latest version and you can see it work in the jsFiddle link I provided. You picked up a version before I fixed a couple issues. – Airless