jquery 여러 요소에 애니메이션 적용

Question

다음 작업을 수행하려고합니다.

페이지에 두 세트의 DOM 요소가 있습니다. 첫 번째 집합의 모든 요소는 클래스 display-element을 전달하고 두 번째 요소 집합은 클래스 edit-element을 전달합니다.

이제 버튼 (id = edit-button)이 있습니다. 이 버튼을 클릭하면 모든 display-elements이 사라지고 모든 edit-elements이 나타나기를 바랍니다.

는 자연스럽게했다 :

$('#edit-button').click(function(){ 
    $('.display-element').fadeOut(300, function() { 
     $('.edit-element').fadeIn(300); 
    }); 
}); 

내가 예상대로이 작동하지 않았다 놀랍게도 발견했다. 이것은 무슨 일이 있었는지입니다 : 즉시 클래스 display-element와 첫 번째 요소는 페이드 아웃으로 모든 edit-elements이 페이드 시작

지금은 모두가 할 수있는 사용하는 쉬운 방법 (내가 놓친 문서 아마도 뭔가)가있다. edit-elementsdisplay-elements이 흐려지기 시작한 후에 만 ​​에 페이드가 시작됩니까?

감사 왜이 정말 일어날 것

Answer 1

JRH? 즉, 동시에 애니메이션을 시작한다는 의미입니다 (결국 .fadeOut에 대한 호출은 하나뿐입니다). $()가 배열을 생성하고 .fadeOut을 호출하면 jQuery가 배열을 반복하고 각 요소에 대해 수행하는 모든 작업을 수행하기 때문입니다. 첫 번째부터 시작. 콜백은 모든 애니메이션에 "첨부"되므로 첫 번째 콜백의 가시적 인 효과를 볼 수 있습니다.

내 생각에 반환 ​​된 요소의 배열을 반복적으로 반복하여 콜백을 마지막에 대해서만 연결하는 것으로 확인할 수 있습니다.

$('#edit-button').click(function(){ 
    var display_elements = $('.display-element'); 
    var len = display_elements.length; 
    for (var i = 0; i < len-1; i++) { 
     $(display_elements[i]).fadeOut(300); // no callback 
    } 
    $(display_elements[len-1]).fadeOut(300, function() { 
     $('.edit-element').fadeIn(300); 
    }); // last element - attach callback 
}); 

내 자바 스크립트 - Fu는이 솔루션은 기능에 페이딩에의 setTimeout을 사용하는 것입니다 :)

Answer 2

매우 강한 아니라고 코드가 꺼져 있으면, 내가 인정해야 죄송

자바 스크립트 함수 300 밀리 초

의 기능에 페이딩의 방아쇠를 지연 것이라고

$('#edit-button').click(function(){ 
    $('.display-element').fadeOut(300); 
setTimeout("$('.edit-element').fadeIn(300);", 300); 
}); 

는

Answer 3

글쎄, 난 이것에 해결, 어떤 '멋진 API 방법'을 (를) 찾을 수 없습니다 한 :

$('#edit-button').click(function() { 
    var displays = $('.display-element'); 
    var counter = 0; 
    var max = displays.length; 
    displays.fadeOut(300, function() { 
     counter++; 
     if(counter>=max) $('.input-element').fadeIn(300); 
    } 
}); 

이 본질적 @ 더 '자바 스크립트 - Fu는':)

Answer 4

와 shylent의 대답은, 난 그냥 비슷한 문제를 실행하고 "단계"콜백 옵션이 원하는 동작을 굴복 발견했다.

단계 : 애니메이션의 각 단계 후에 호출 할 함수.

^http://api.jquery.com/animate/

스크롤 단계 사용에 대한 데모까지 당신은 각 단계에서 나머지 당신의 세트를 업데이트하는 단계를 사용하여 단일 개체에 애니메이션을 호출 할 수 있도록하는 방법을 볼 수 있습니다 애니메이션. 이렇게하면 애니메이션이 완료 될 때 하나의 콜백 만 실행됩니다.