jquery

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");
});