jquery fade-ins, fade-outs piling up

Question

jquery ajax가 반환 될 때 작업 결과에 따라 페이 지에 다양한 DIV 메시지가 페이드 아웃되고 페이드 아웃됩니다. 예 :

$("#RefConflictSelf").fadeIn(1000).fadeOut(6000); 

나는이 효과가 좋고 유지하고 싶습니다.

다른 Ajax 작업을 트리거하기 위해 다른 단추를 누르기 전에 사용자가 7 초 이상 기다리면 정상적으로 작동합니다. 하지만 버튼을 하나씩 클릭하면 (실제로 합법적 인 일) div가 페이드 인 및 페이드 아웃되기 시작하므로 사용자가 더 이상 신경 쓰지 않는 이전 작업에 대해 이러한 div가 페이드 인하 고 페이드 아웃됩니다.

요약 : 사용자가 두 번째 버튼을 클릭 할 때까지는 첫 번째/이전 버튼 클릭에서 div의 페이드 인/페이드 아웃에 대해 더 이상 신경 쓰지 않습니다.

질문 : "페이드 인 또는 페이드 아웃"div를 즉시 숨길 수 있지만 최신 버튼을 클릭해도 메시지가 계속 흐려지지 않게 할 수 있습니까? ,

$("#RefConflictSelf").hide(); 

작품의 이런 종류의,하지만 당신은 다른 후 한 5 개 버튼을 클릭하면 있기 때문에, 서투른 : 버튼이 클릭 할 때마다 나는 즉시 예를 들어, 모든 메시지 된 div를 숨길 수 :

는 이미이 시도 최신 div 메시지는 원래 메시지가 사라질 때까지 보이지 않게 남아 있습니다. 그래서 ".hide()"는 원래의 (또는 최신의 비 - 밟지 않은 것) 페이드 타임이 경과 할 때까지 더 새로운 "페이드 인"조작을 강요하는 것처럼 보입니다.

jquery가 이전의 모든 페이드 div 메시지를 숨기도록하려면 어떻게해야합니까? 그렇다면 가장 최근의 div 메시지가 페이드 인 (fade in) 한 다음 정상적으로 출력되도록 허용 하시겠습니까? (물론 다른 단추를 클릭하지 않으면 이전 단추를 눌러야하며 새 단추를 눌러야합니다.

Answer 1

애니메이션이 누적되는 이유는 fadeIn() 및 fadeOut()이 추가되기 때문입니다 실제로 지울 수있는 것보다 빠른 속도로 애니메이션 대기열에 저장됩니다 (한 쌍의 경우 7 초, 재생 시간 기준). 따라서 새 페이드 애니메이션을 호출하기 전에 대기열을 지워야합니다.

이

는 stop(true,false) 대한 간단한 인 stop(true)을 사용하여 수행되고, (1) 큐 클리어하지만 (2) 애니메이션의 종료 상태로 이동하지에 지시 jQuery를 :

$("#RefConflictSelf").stop(true).fadeIn(1000).fadeOut(6000); 

성격에 따라 효과를 얻으려는 경우 stop(true,true)은 대기열 지우기를 지시하므로 현재 대기중인 애니메이션의 최종 상태로 이동합니다 (및).

당신이 당신의 질문에 따라, 마크 업을 표시하지 않았지만

---

:

어떻게 JQuery와 숨기기 이전의 모든 페이딩 DIV 메시지를 확인하지만 는 최신 DIV 메시지가 페이드 할 수 있도록 할, 그럼 평소처럼? ( 물론 다른 버튼을 클릭하지 않으면 이전의 을 밟아야하며 새 버튼을 사용할 수 있습니다.)

... ID를 재활용하고 있다는 느낌이 들었습니다. ID은 HTML 문서에서 고유해야합니다. 정의에 따라 여러 개의 동일한 ID를 처리하는 브라우저 동작은 정의되지 않은 상태로 유지되지만 대개 (지능적으로 정렬) 첫 번째 항목을 선택하고 나머지 항목은 무시합니다.

p/s : jQuery 애니메이션을 처리 할 때 write an article why .stop() is very useful 일이 발생합니다. 몇 달 전 년 전이었습니다.