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