Solution to the accumulation of animate animation in jquery_jquery

Yesterday, a classmate asked me for help and said he made a simple animation effect, which is to automatically play left and right pictures

Copy the code The code is as follows:

/* Seamless focus image*/
var _left = 770;
var left = -_left;//-770
function slideImg() {
if(left == -3080 || left == 0) {
_left = -_left;
}
$ ('.slidepics').animate({'left': left 'px'},1000);
left = left - _left;
tim = setTimeout(slideImg,5000);
}
slideImg();

Copy code The code is as follows:

I After taking a look, it’s quite simple. At first glance, there’s nothing wrong with it. Later, he talked about the strange problem that had been bothering him for a month. He said that when the window was at the forefront, it was OK, but when he minimized the window or browsed other windows, the playback would appear quickly. After a while, it was normal again (ie. No problem, there is a problem with Chrome, and there is also a problem with Firefox).

Since I have never encountered this problem before, I thought about it for more than half an hour and couldn't figure it out. Then I looked through the notes I made before and found the answer. When setTimeout is used, an animation queue will be generated. It is possible that the animation queue accumulates when the window is not at the front in the Chrome browser, and suddenly explodes when it returns to the front, so I think of the stop method in jquery, which stops all animations on this element. animation. Sure enough, it was ok after adding

Copy the code The code is as follows:

/* Seamless focus image*/
var _left = 770;
var left = -_left;//- 770
function slideImg() {
if(left == -3080 || left == 0) {
_left = -_left;
}
$('.slidepics'). stop().animate({'left': left 'px'},1000);
left = left - _left;
tim = setTimeout(slideImg,5000);
}
slideImg( );