Animate导出html为空白,Jquery - Animate innerHTML可能吗？

3 个答案:

答案 0 :(得分：4)

尝试这样的事情：

$(document).ready(function () {

var interval = setInterval(function () {

$('#text').append('

new text

');

$('#text p:last').fadeIn('slow');

}, 5000);

});

请参阅示例here

如果要杀死间隔，可以这样做：

clearInterval(interval);

Greatings。

答案 1 :(得分：3)

逐行是有点棘手，但是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);​

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

答案 2 :(得分：1)

这是一个可以在多行文本中动画制作的函数，一个接一个：

$(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 = "
";

}

nextLine += lines[lineCntr++];

$("" + nextLine + "").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);

});