jQuery는 여러 요소를 애니메이션합니다

StackOverflow https://stackoverflow.com/questions/2033467

문제

나는 다음을하려고 노력하고있다 :

페이지에 두 세트의 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-elements 페이딩을 시작하십시오 결국 display-elements 사라 졌습니까?

감사
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
});

코드가 꺼져 있으면 미안합니다. 내 JavaScript-fu가 그리 강하지 않다는 것을 인정해야합니다. :)

다른 팁

글쎄, 'Nifty 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);
    }
});

이것은 본질적으로 @shylent의 답변이며, 더 많은 'javascript-fu'와 함께 :)

해결책은 기능의 페이딩에서 설정 타임 아웃을 사용하는 것입니다.

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

JavaScript 함수는 300 마일 동안 기능이있는 기능의 트리거를 지연시킵니다.

방금 비슷한 문제를 일으켜 "단계"콜백 옵션이 원하는 동작을 산출했습니다.

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

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

단계 사용을 위해 데모로 스크롤하면 단일 객체에서 애니메이션을 호출 할 수있는 방법을 확인한 다음 단계를 사용하여 애니메이션의 각 단계에서 나머지 세트를 업데이트하십시오. 이렇게하면 애니메이션이 완료되면 콜백이 하나만 발생했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top