jQuery, 여러 애니메이션 후에 한 번만 콜백 호출

한 번에 여러 애니메이션을 실행하고 모든 기능이 완료되면 함수를 호출하려고한다고 가정 해 보겠습니다.jQuery, 여러 애니메이션 후에 한 번만 콜백 호출

애니메이션이 하나뿐이므로 쉽습니다. 거기에 콜백이 있습니다. 예 :

$(".myclass").fadeOut(slow,mycallback);

내 선택기에서 여러 항목을 찾으면 각 항목에 대해 콜백이 호출됩니다.

해결 방법이 너무 어렵지 않습니다. 예 :

<!DOCTYPE html> 
<html> 
<head> 
    <title>Example</title> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    $(document).ready(function() { 
     var $mc=$(".myclass"),l=$mc.length; 
     $mc.fadeOut("slow",function(){ 
     if (! --l) $("#target").append("<p>All done.</p>"); 
     }); 
    }); 
    </script> 
    <style type="text/css"> 
    </style> 
</head> 
<body> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <p class="myclass">Paragraph</p> 
    <div id="target"></div> 
</body> 
</html>

내 질문이 있습니다. 더 좋은 방법이 있습니까?

출처

2010-03-12 David V.

대부분의 경우 카운터 대신 부울을 사용하므로 (첫 번째 애니메이션의 끝에서 작업이 수행됩니다), 그렇지 않으면 동일한 방법입니다. 좋은 질문입니다. 저는 다른 방법으로 궁금합니다. –

사실. 예를 들어 모든 애니메이션의 길이가 같지 않으면 (단순한 예와 같지 않음) 모든 것이 끝나기를 기다리고 싶을뿐입니다. 움직이는 것을 멈추거나 브라우저가 사라지면 무언가를하고 싶을 것입니다. –

당신은 그들 모두에 대해 동일한 콜백을 실행, 그러나 아무도는 현재 더 이상 애니메이션되고 있지 않은 경우에만이처럼 if 절을 실행할 수 있습니다

어떤 여전히 통해 애니메이션이 적용되는 경우이 그냥 확인

$(".myclass").fadeOut("slow", function() { 
    if ($(".myclass:animated").length === 0) 
     $("#target").append("<p>All done.</p>"); 
    });

:animated selector. 그런 다음 동일한 개념을 사용하여 여러 가지 많은 애니메이션을한다면 , 그냥이 같은 선택에 추가 :

$(".myclass:animated, .myClass2:animated")

이 많은 장소에서 사용하는 경우, 나는 그가 onFinish 기능을 콜백 할 것 또는 그것을 정돈하는 무엇인가. 내 경우

출처

2010-03-12 12:18:04

니스, 나는 이것의 결정적인 측면을 좋아한다. –

나도 이걸 좋아해.이 문제도 +1 –

. 영리한 해결책. –

나는이 스레드에 대한 논의에서

if ($(".myclass:animated").length === 1)

출처

2010-08-04 12:42:46

룩을 정의 할 수 있습니다 jQuery $.animate() multiple elements but only fire callback once

.when()/.then()과 .promise().done(callback()); 기능은 하나의 호출의 문제에 훨씬 더 우아한 솔루션을 제공 모든 애니메이션의 끝에서 콜백 (calllback).

출처

2012-02-19 18:04:38 Scrat

+12

정답이어야합니다. –

전화하세요. 비슷하게, 마지막 요소가 완료되면 대기열을 사용하여 콜백을 시작합니다 : elements.fadeOut (330) .last(). queue (function() {}); – Tyler

jQuery, 여러 애니메이션 후에 한 번만 콜백 호출

답변

관련 문제