가능한 중복은 :
jquery finish one animation then start the other one어떻게 jQuery 애니메이션 대기열을 만들 수 있습니까?
나는 아약스를 통해로드 된 div의 세트를 (우리는 6 개 제품을 대표하는 약 6 div의를 얘기하고) 있어요.
나는 div에서 jquery.fadeIn()과 같은 프로그레시브 애니메이션을 사용하려고합니다. 이전 div의 애니메이션이 끝난 후입니다. 이 작업을 수행하는 최적의 방법은 무엇입니까?
나는 다음과 같이 생각하고 있어요 :
요소를 순차적으로 사라지게하는 요소에 대한 재귀 호출을 수행하기위한 자체 작은 플러그인을 작성할 수 있습니다. 이런 식으로 작동해야합니다 :
$.fn.queuedFadeIn = function(speed) {
var elem = $(this);
if(elem.length > 0) {
elem.eq(0).fadeIn(speed, function() {
elem.slice(1).queuedFadeIn(speed);
});
}
}
$('.div_selector').queuedFadeIn(1000);
이렇게하면 계속해서 색이 바래야합니다. 상황을 더 명확하게 만드는 의사 코드는 다음과 같습니다.
# If there are elements in the selection:
# Find the first element in selection, fade it in
# After fade in, call itself, discarding the first element
위대한 작품, 애니메이션을 마친 후에 내 페이지 매김을 표시하므로 이상하게 보일 수 없도록 한 줄 더 추가했습니다. 고맙습니다. – dakull
대부분의 jQuery 효과 콜백 지원 k 함수. 그래서 당신이 개설 한 것은 효과가 있습니다.
애니메이트 기능은 코드가 완료된 후 실행하도록 설계 거기에 콜백을 가지고 있습니다.
다른 방법이 있습니다. 별난 일이지만 작동합니다.
var callbacks = [];
$.each(["f", "e", "d", "c", "b", "a"], function(index, id) {
callbacks[index] = function() {
$("#" + id).fadeIn(callbacks[index - 1]);
};
});
callbacks[5]();
소설의 사고 방식. 문자열 값을 ID로 사용하는 대신 요소 집합을 통해'each()'를 사용하여 개체를 직접 사용하는 것이 좋습니다. 그렇게하면 좀 더 읽기 쉽고'# a','# b','# c'라는 이름의 요소를 필요로하지 않습니다. –
자주 묻는 메시지가 표시 될 수 있으며 가능한 많은 해결책이 있습니다. 참조 : http://stackoverflow.com/questions/461912/jquery-finish-one-animation-then-start-the-other-one 및 http://stackoverflow.com/questions/505434/jquery-animation -queues-across-multiple-elements 및 http://stackoverflow.com/questions/1594077/jquery-synchronous-animation – Shog9
그래,하지만 해결책은 jquery 플러그인 형태로하는 것이 더 낫다. – dakull
기존 질문 대신 독자가 기존 질문 대신 여기에 게시 되었기 때문에 기존 질문의 독자가 jquery 플러그인 솔루션을 사용할 수 없음을 의미합니다. – Shog9