Home > Web Front-end > JS Tutorial > Solution to the accumulation of animate animation in jquery_jquery

Solution to the accumulation of animate animation in jquery_jquery

WBOY
Release: 2016-05-16 17:20:36
Original
1330 people have browsed it

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( );
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template