这是我的代码,我托管在dropbox
在google chrome上运行一段时间后,这个简单的动画就会冻结,我在4个不同的浏览器(chrome、IE 9、Opera、Firefoc)上进行了测试。“页面加载”动画在除chrome之外的所有浏览器上都运行得很平滑,这可能是什么原因造成的?(也不会在jsfiddle上运行)
注:动画冻结可能需要10-15秒,我知道这在以后的应用程序中不会有问题,但我仍然想知道为什么它会这样做,因为它不在其他浏览器上。
最佳答案
你可以用一些设置超时来调用infiniteLoop。为什么我们不简单地使用递归呢?
编辑:这个可以按你的要求工作。它使用jQuery的step回调来计算百分比。如果大于70%,则开始下一个动画。
$(document).ready(function() {
var parent = $('.loadingBar').width(),
parentWidth = parent.toString(),
colors = ["red","blue","yellow","green"],
idx = 0;
var extend = function(color) {
var colorClass = '#' + color + 'Bar',
currentIndex = parseInt($(colorClass).css('z-index')),
afterIndex = currentIndex + 4;
var backColor = $(colorClass).css('background-color');
$(colorClass).css('z-index', afterIndex)
.animate({width:parentWidth},
{step:function(width,tween){
var percent = Math.round(width/parentWidth*100);
if((typeof $(this).data("next") === "undefined" || $(this).data("next") === null) && percent >= 70){
$(this).data("next",true);
if(idx > colors.length-2)
idx = 0;
else
idx++;
extend(colors[idx]);
}
},
duration:2000,
complete:function(){
$(this).data("next",null);
$(this).css('width', '0px');
$('.loadingBar').css('background-color', backColor);
}
});
}
extend(colors[0]);
});