jquery_jquery의 애니메이션 애니메이션 축적에 대한 솔루션

어제 친구가 도움을 요청해서 왼쪽과 오른쪽 사진이 자동으로 재생되는 간단한 애니메이션 효과를 만들어 줬다고 합니다

코드 복사 코드는 다음과 같습니다.

/* 연속 초점 이미지*/
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();

코드 복사

살펴보면 아주 간단해요. 얼핏 보면 별거 없어요. 나중에는 한 달 동안 자신을 괴롭혔던 이상한 문제에 대해 이야기를 나눴는데, 창이 맨 앞에 있을 때는 괜찮았는데, 창을 최소화하거나 다른 창을 탐색하면 재생이 빨리 나온다고 하더군요. 잠시 후 다시 정상이 되었습니다(예: 문제 없습니다. Chrome에 문제가 있고 Firefox에도 문제가 있습니다).

이런 문제는 한 번도 겪어본 적이 없어서 30분 넘게 고민했는데, 예전에 작성한 노트를 뒤져보니 setTimeout이 나와서 답을 찾았습니다. 사용하면 애니메이션 큐가 생성되는데, 크롬 브라우저에서 창이 맨 앞에 있지 않을 때 애니메이션 큐가 쌓이다가 맨 앞으로 돌아오면 갑자기 폭발할 가능성이 있으니 jquery의 stop 메소드를 생각해보면, 이 요소의 모든 애니메이션을 중지합니다. 물론 추가하고 나면 괜찮습니다

코드 복사 코드는 다음과 같습니다

/* 연속 초점 이미지*/
var _left = 770>var left = -_left;/ /- 770
function SlideImg() {
if(left == -3080 || left == 0) {
_left =
}
$('.slidepics' ).stop().animate({'left': left 'px'},1000);
left = left - _left
tim = setTimeout(slideImg,5000)
슬라이드Img( )