google chrome - jQuery code lags for certain user opacity -

google chrome - jQuery code lags for certain user opacity -

i've little problem jquery code. have background multiple preloaded image. want background switch between these images in time. example:

image 1 fade in background fade out black after 15s image 2 fade in background fade out black after 15s etc.

but problem on chrome, there short lags, , visitors don't it. (example, if writing on textarea box, freezes half sec during fading out black).

here's code:

var bgs = shuffle(["image1.png","image2.png","image3.png"]); var actualbg = -1; var endbg = bgs[bgs.length-1]; // "image3.png" function changebackground() { if(actualbg == -1) // if it's first time fade in background { $(".bg") .css({'background-image': 'url('+bgs[0]+'")'}) .animate({opacity: 1}, 2000); settimeout(changebackground, 8000); actualbg++; } else { if(actualbg == endbg) // if reached end of array actualbg = 0; // go first slot else actualbg++; // otherwise load next background image $(".bg").animate({opacity: 0}, 'slow', function() { $(this) .css({'background-image': 'url('+bgs[actualbg]+')'}) .animate({opacity: 1}); }); settimeout(changebackground, 15000); } }

note: problem doesn't occurs on firefox, on chrome.

thanks answers!

jquery google-chrome animation opacity lag