How to solve animate animation accumulation in jquery

Source: Internet
Author: User

A classmate asked me for help yesterday, saying that a simple animation effect is that the picture is automatically played left and right.
Copy codeThe Code is as follows:
<Span style = "white-space: pre"> </span>/* simplified focus chart */
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 (Slim, 5000 );
}
SlideImg ();

Copy codeThe Code is as follows:
I looked at it and it was quite simple. At first glance, there was no problem. Later, he talked about the strange problem that plagued him for a month. He said that the window was OK at the frontend, but when the window was minimized or another window was browsed, the stream played quickly, after a while, it will be normal again (ie is OK, chrome is OK, and firefox is OK ).

Since I have never encountered this problem before, I also thought about it for more than half an hour and did not solve it. Later I flipped through my previous notes and got the answer, when setTimeout is used, an animation queue is generated. In chrome, when the window is not at the frontend, the accumulation of the animation queue occurs. When it returns to the frontend, it suddenly bursts out, the stop method in jquery is used to stop all animations on this element. Sure enough, after adding it, it will be OK.

Copy codeThe Code is as follows:
<Span style = "white-space: pre"> </span>/* simplified focus chart */
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 (Slim, 5000 );
}
SlideImg ();

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.