.animate()의 콜백이 twice jquery로 호출됩니다.

.animate()의 콜백이 twice jquery로 호출됩니다.

약간 넣었더니.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()처음 완료되자마자 반복됩니다.스크롤 설정Top 애니메이션-속도:0그건 그렇고 도움이 안 됐어요!

저는 그것이 애니메이션 대기열과 관련이 있다고 생각하지만, 어떻게 해결해야 할지, 특히 왜 이런 일이 일어나는지 이해할 수가 없습니다.

여러 요소 애니메이션의 완료를 위해 단일 콜백을 받으려면 지연된 개체를 사용합니다.

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

전화할때.animate컬렉션에서 컬렉션의 각 요소는 개별적으로 애니메이션화됩니다.각각의 작업이 완료되면 콜백이 호출됩니다.8개의 요소를 애니메이션으로 만들면 8개의 콜백을 받을 수 있다는 뜻입니다..promise().done(...)대신 솔루션은 이 8가지 요소에 대한 모든 애니메이션이 완료되면 한 번의 콜백을 제공합니다.이는 8가지 요소 중 하나에서 다른 애니메이션이 발생할 경우 해당 애니메이션이 완료될 때까지 콜백이 발생하지 않는다는 부작용이 있습니다.

약속 및 연기된 개체에 대한 자세한 설명은 jQuery API를 참조하십시오.

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

공급된 경우start,step,progress,complete,done,fail,그리고.always콜백은 element 단위로 호출됩니다...

두 가지 요소를 애니메이션화하고 있으니 (더html요소와body요소), 두 개의 콜백을 받습니다. (OP가 두 개의 요소를 애니메이션화하는 이유를 궁금해하는 사람은 애니메이션이 일부 브라우저에서는 작동하지만 다른 브라우저에서는 작동하기 때문입니다.)

애니메이션이 완료되면 한번의 콜백을 받으려면,animatedocs는 애니메이션 큐에 대한 약속을 얻기 위해 메소드를 사용하는 것을 가리키고, 다음으로 사용합니다.then콜백 대기열을 설정하는 방법:

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

(참고: Kevin B는 처음 질문을 받았을 때 답변에서 이 점을 지적했습니다.4년이 지나서야 그것이 없어진 것을 알아차리고, 덧붙였고, 그리고...케빈의 대답을 봤습니다그가 마땅히 받아야 할 사랑을 대답해 주세요.이것이 합격된 답변이니, 저는 그것을 넣어야 한다고 생각했습니다.)

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

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>

언급URL : https://stackoverflow.com/questions/8790752/callback-of-animate-gets-called-twice-jquery