복붙노트

[JQUERY] .animate ()의 콜백은 두 번 JQuery와 호출되는

JQUERY

.animate ()의 콜백은 두 번 JQuery와 호출되는

해결법


  1. 1.애니메이션은에 애니메이션을 호출 세트의 각 요소에 대해 한 번 콜백을 호출

    애니메이션은에 애니메이션을 호출 세트의 각 요소에 대해 한 번 콜백을 호출

    이 두 가지 요소 (html 요소 및 신체 요소) 애니메이션을하고 있기 때문에, 당신은이 콜백을 받고 있습니다. (애니메이션이 다른 브라우저에서 일부 브라우저에 있지만 HTML에 몸에서 작동하기 때문에 영업 이익은 두 가지 요소 애니메이션을 왜 궁금 누군가를 위해, 그것은입니다.)

    애니메이션이 완료되면 하나의 콜백을 얻으려면, 애니메이션의 문서는 콜백을 큐에 다음 사용 후, 애니메이션 대기열에 대한 약속을 얻기 위해 약속 방법을 사용하여 당신을 가리 킵니다 :

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

    (참고 :. 케빈 B는 질문 첫번째 질문을 받았다 때, 그것은 없어진 눈치를 추가 할 때 나는 4 년 뒤까지하지 않았다 그의 대답이 밖으로 지적, 그리고 ... 다음 케빈의 답변을보고 자신의 응답 전을주십시오. 그것은 가치가 사랑 해요.이 허용 대답은, 내가 그것을 떠나야한다대로 내가 생각.)

    여기서 각각의 요소 콜백 전반적인 완료 콜백을 모두 보여주는 예이다 :

    jQuery를 (함수 ($) { $ ( "# 하나, #two"). 애니메이션 ({ marginLeft : "30em" }, 함수() { // 요소마다 호출 ( "완료 살리는"+ this.id)를 표시; }). 약속 (). 다음 (함수 () { // 총 애니메이션이 완료되면 호출 ( "애니메이션 완료 ') 디스플레이; }); 기능 표시 (MSG) { $ ( "

    ") HTML (MSG) .appendTo (는 document.body).; } });

    나는 야 하나
    나는이 이야 <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">


  2. 2.여러 요소 애니메이션, 사용 연기 대상의 완성을위한 하나의 콜백을 얻으려면.

    여러 요소 애니메이션, 사용 연기 대상의 완성을위한 하나의 콜백을 얻으려면.

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

    약속의 상세한 설명 및 이연 객체에 대한 jQuery를 API를 참조하십시오.

  3. from https://stackoverflow.com/questions/8790752/callback-of-animate-gets-called-twice-jquery by cc-by-sa and MIT license