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

});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值