jQeury가 fade in 및 out될 때 주의해야 할 문제_jquery

이틀 전 Oak Lodge의 친구가 게시한 "JQuery는 그림 캐러셀 효과를 구현합니다"라는 기사를 보았는데 꽤 흥미로웠고 그가 그림 페이드인과 페이드인을 구현하기 위해 fadeIn과 fadeOut을 사용했다는 것을 알았습니다. 페이드아웃 회전. 그 당시에는 연속해서 여러 번 클릭하면 애니메이션 생성이 지연될까 봐 걱정이 되었습니다. 그런데 몇번을 연속으로 클릭했는데 눈에 띄는 지연 현상은 보이지 않아서 더 이상 생각하지 못했습니다.
우리 모두 알고 있듯이 jQuery로 생성된 애니메이션 효과는 기본적으로 대기열에 추가됩니다. If: 한 번 클릭하면 3초 동안 애니메이션이 생성됩니다. 그런 다음 빠르게 점을 세 번 연결했습니다. 그런 다음 모든 애니메이션이 종료되는 데 9초가 걸립니다. Animate는 애니메이션이 대기열에 들어갈지 여부를 쉽게 설정할 수 있는 사용자 정의 애니메이션입니다. 그러나 fadeIn과 fadeOut을 사용하는 것은 번거롭습니다.
일부 플래시 웹사이트의 아이콘을 보면 마우스를 올리자마자 아이콘이 천천히 바뀌고, 떼면 다시 천천히 바뀌는 모습이 참 아름답습니다. 비슷한 효과를 얻을 수 있는지 확인하기 위해 jQuery를 사용할 계획입니다. 연습하느라 사진 두 장만 뽑았습니다.

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

< ;div id="div">


< /div>

이런 식으로 첫 번째 사진이 두 번째 사진을 덮고 첫 번째 사진만 페이드 인/아웃하면 특수 효과가 나타납니다. 그래서 hover, fadeIn, fadeOut을 이용하여

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

$(document).ready(function () {
$("div").hover(
function () { $("#1").fadeOut(1000); },
function () { $("#1").fadeIn(1000) }
);
})

하지만 빨리 움직이지 않으면 이런 문제가 발생합니다. 멈추지 않고 마우스를 안팎으로 움직입니다. 그런 다음 애니메이션이 모두 대기열에 들어가고 애니메이션이 계속 움직이게 되는데 이는 매우 보기 흉합니다.

그래서 저는 dequeue(), 정의를 사용할 예정입니다: 대기열 앞에 있는 함수를 제거하고 실행합니다.
계속 들어오고 나가면 이전 작업은 다음과 같을 것 같습니다. 대기열의 애니메이션을 삭제했습니다. 그러면 최종 애니메이션이 실행됩니다.

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

function () { $("#1 ").dequeue().fadeOut(1000); },
function () { $("#1").dequeue().fadeIn(1000); }

하지만 더 귀찮은 상황이 발생했습니다. 마우스를 계속 안팎으로 움직이면 사진이 사라지기도 하고, 변함이 없을 때도 있었습니다. 무슨 일이야?

그런 다음:stop(), 정의:
지정된 모든 요소에서 현재 실행 중인 모든 애니메이션을 중지합니다.
실행 대기열에 있는 애니메이션이 있으면 즉시 시작됩니다.

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

function () { $("#1 ").stop ().fadeOut(1000); },
function () { $("#1").stop().fadeIn(1000); }

멈춥니다 이전의 모든 대기열, 마침내 작동합니다! 그런데 사진이 반쯤 흐려지고 움직이지 않게 됐어요! 마치 두 장의 사진을 겹쳐 놓은 것 같습니다.
또 무슨 일이 일어났나요?
정지시 매개변수를 추가하기 전까지는 정상적으로 영상이 출력될 수 있습니다.
Clearqueue(선택 사항) 부울
true로 설정하면 대기열을 지웁니다. 애니메이션을 즉시 종료할 수 있습니다.
Gotoend(선택 사항) 부울
현재 실행 중인 애니메이션을 즉시 완료하도록 하고 표시 및 숨기기의 원래 스타일을 재설정하고 콜백 함수를 호출하는 등의 작업을 수행합니다.

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

function () { $("#1 ").stop(true,true).fadeOut(1000); },
function () { $("#1").stop(true, true).fadeIn(1000); }

그런데 실행이 완료된 후 전체 이미지가 갑자기 표시되고 페이드 인, 아웃 등의 효과가 없는 상황이 발생합니다.
애니메이트를 사용하는 것 외에는 다른 방법이 없습니다.

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

function () { $("#1").stop().animate({ 'opacity': 0 }, 1000) },
function () { $("#1" ).stop().animate({'opacity':1}, 1000) }
또는:
function () { $("#1").animate({ 'opacity': 0 }, { 대기열: false, 기간: 1000 });
function () { $("#1").animate({ 'opacity': 1 }, { 대기열: false, 기간: 1000 });

이렇게 해서 우리가 원했던 완벽한 효과를 얻었습니다.
　
정리하자면 정지 이론과 큐 제거 이론을 활용하는 것이 가능한데 왜 잘못되는 걸까요? 잘 모르겠습니다. jQuery 라이브러리의 문제일 수도 있습니다.
문제를 찾으려면 원본 파일을 확인해야 합니다. 하지만 앞으로 fadeIn과 fadeOut을 사용할 때는 정말 조심하세요. 물론 Oak Lodge에 있는 내 친구가 작성한
《JQuery의 이미지 캐러셀 효과 구현"은 확실히 좋은 예입니다. 시간을 2000으로 변경하고 나서야 지연을 느꼈습니다. 저처럼 고의적으로 문제를 일으키려는 사람들만이
이렇게 오랫동안 설정할 수 있을까요? 관심 있는 친구들은 Oak Lodge에 가서 그것에 대해 배울 수 있습니다. 이는 간단하고 아름답고 실용적인 예입니다.