Question

这是我在dropbox

中的公共文件夹中托管的代码

这个简单的动画在谷歌浏览器上运行一段时间后冻结，我在4种不同的浏览器（Chrome，IE 9，Opera，Firefoc）上测试过。 “页面加载”动画在除chrome之外的所有浏览器上运行顺畅，可能导致这种情况？（也不会在jsfiddle上运行）

PS：可能需要10到15秒，直到动画冻结，我知道这在以后的应用程序中不会出现问题，但我仍然想知道它为什么这样做，因为它不在其他浏览器上。< / p>

Answer 1

用几个setTimeouts调用infiniteLoop。为什么我们不仅仅为了这个而使用妄想？

编辑：这个工作正如您可能希望它工作。它使用jQuery的步骤回调来计算百分比。如果是> 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]);

});

jQuery：动画仅在Chrome浏览器中卡住/崩溃

1 个答案: