这是我的代码,我托管在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]);

});

10-05 21:00
查看更多