Question

我有一个Js脚本，可以很快地在文档上绘制800个完美的贴片。我的目标是逐个绘制它们以创建一些加载效果。我喜欢它的起始速度但是在100之后它开始减速并且变得无聊......是否有一些解决方案或者它是否适用于js？

var Gen_height=$(document).height()-21;
var Gen_width=$(document).width()-41;
var wid=Gen_width/40;
var hei=Gen_height/20;
var rot=40*20;

contrail();

var counter=0;

function contrail() {
    if (counter < rot) {
        $('body').append('<div id="box" style="width:' + wid + 'px; height:' + hei + 'px;"><div style="padding-top:15px;"><center>' + counter + '</center></div></div>');
        counter++
    }
    setTimeout(contrail, 0);
};
});

Answer 1

如评论中所述，由于用户计算机的性能，它不是最好的方法。您应该使用JQueryUI创建div并使用动画显示它们，例如：http://jsfiddle.net/rT5rL/13/

var $container = $('#container');
$container.hide();
while(counter <= rot) 
{
   $container.append('<div id="box" style="width:' + wid + 'px; height:' + hei + 'px;"><div style="padding-top:15px;"><center>' + counter + '</center></div></div>');
   counter++;
}

 $container.slideDown(1000);

此处有更多效果：http://jqueryui.com/effect/#easing

$container.animate( { height: "show" }, 2000, 'easeInOutBounce');

Javascript循环函数在良好的开始后开始运行缓慢

1 个答案: