[jquery] .animate () 콜백이 두 번 호출됩니다.

Program / 글쓴이

scrollTop-animation을 추가했기 때문에 콜백의 일부가 두 번 호출됩니다.

$('html, body').animate({scrollTop: '0px'}, 300,function() {
    $('#content').load(window.location.href, postdata, function() {
        $('#step2').addClass('stepactive').hide().fadeIn(700, function() {
            $('#content').show('slide',800);
        });
    });
});

그것은 단지를 반복하는 것 같습니다 .show(), 적어도 나는 load()또는 .fadeIn()두 번째로 호출되는 인상을 가지고 있지 않습니다 . 는 .show()즉시이 처음으로 끝난 반복됩니다. 0그런데 scrollTop 애니메이션 속도를 설정하는 것은 도움이되지 않았습니다!

나는 그것이 애니메이션 대기열과 관련이 있다고 가정하지만 해결 방법을 찾는 방법과 특히 이것이 발생하는 이유 를 알 수 없습니다 .

답변

animate호출 하는 집합의 각 요소 에 대해 한 번씩 콜백 을 호출 animate합니다.

공급하면 start, step, progress, complete, done, fail, 및 always콜백이 호출된다 당 요소를 기준으로 …

두 개의 요소 ( html요소와 body요소)에 애니메이션을 적용 하고 있으므로 두 개의 콜백이 발생합니다. ( OP가 왜 두 가지 요소에 애니메이션을 적용 하는지 궁금한 사람에게는 애니메이션이 body일부 브라우저에서는 작동 하지만 html다른 브라우저 에서는 작동하기 때문 입니다.)

애니메이션이 완료되었을 때 단일 콜백 을 얻으려면 animate문서에서 promise메서드를 사용 하여 애니메이션 대기열에 대한 약속을 얻은 다음을 사용 then하여 콜백을 대기열에 넣도록 지시합니다.

$("html, body").animate(/*...*/)
    .promise().then(function() {
        // Animation complete
    });

(참고 : Kevin B는 질문이 처음 질문되었을 때 그의 답변 에서이 점 을 지적했습니다 . 4 년 후 누락 된 것을 발견하고 추가 한 다음 Kevin의 답변을봤을 때까지 말하지 않았습니다. 나는 이것이 받아 들여지는 대답이기 때문에 그것을 남겨 두어야한다고 생각했습니다.)

다음은 개별 요소 콜백과 전체 완료 콜백을 모두 보여주는 예입니다.

jQuery(function($) {

  $("#one, #two").animate({
    marginLeft: "30em"
  }, function() {
    // Called per element
    display("Done animating " + this.id);
  }).promise().then(function() {
    // Called when the animation in total is complete
    display("Done with animation");
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});
<div id="one">I'm one</div>
<div id="two">I'm two</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

스 니펫 확장

답변

여러 요소 애니메이션 완료를위한 단일 콜백을 얻으려면 지연된 객체를 사용하십시오.

$(".myClass").animate({
  marginLeft: "30em"
}).promise().done(function(){
  alert("Done animating");
});

Promise 및 Deferred Objects에 대한 자세한 설명은 jQuery API를 참조하십시오 .

답변