CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-animate
borislemke
borislemke

Reputation: 9116

jQuery: animation gets stuck/crashes in Chrome Browser only

Here's my code which I hosted in a public folder in dropbox

This simple animation freezes after a while when running on google chrome, I tested on 4 different browsers(Chrome, IE 9, Opera, Firefoc). The "page loading" animation runs smooth on all browsers except chrome, what might be causing this?(wont run on jsfiddle as well)

PS: It may take up to 10 - 15 secs until the animation freezes, I know this wouldn't be a problem in the application later, but I still wanna know why it does so because it doesnt on other browsers.

Upvotes: 2

Views: 1223

Answers (1)

Christian
Christian

Reputation: 7429

you call infiniteLoop with a few setTimeouts. Why don't us simply use recusion for this?

EDIT: This one works as you may want it to work. It uses jQuery's step callback to calculate the percentage. if it is > 70 %, it starts the next animation.

$(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]);

});

Upvotes: 1

Related Questions