jQuery 지연 체인

일련의 요소를 반복하면서 애니메이션 체인을 만들고 싶습니다. 첫 번째 단계의 애니메이션이 완료되면 다음 루프 단계가 호출됩니다. (-> 화재 2 단계)
변화의 배경 색상을 다시
변화jQuery 지연 체인

이

1 단계 (요소 A의 작업)
변화 배경 색상
변화 글꼴 색상
: 체인은이 같은 것입니다 폰트 색 다시

2 단계 (소자 B의 작업)
배경색 변경
,174,변경 글꼴 색상
대기 일초
변화의 배경 색상을 다시
변화 글꼴 색상을 다시
-> 화재 해결()

나는이 서면으로 작성했습니다 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title>jQuery Deferred</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 


       function animation() { 
        return $.Deferred(function(dfr) { 
         dfr.pipe(function() { 
          return $.Deferred(function(dfr) { 
           $.when($('#text').animate({ 
            color : '#ff0000', 
            fontSize : '3em' 
           }, 'slow').delay(3000), $('#text').animate({ 
            color : '#ff0000', 
            fontSize : '6em' 
           }, 2000)).then(dfr.resolve()) 
          }).promise(); 
         }).pipe(function() { 
          return $.Deferred(function(dfr) { 
           $.when($('#text').animate({ 
            color : '#c456fa', 
            fontSize : '1em' 
           }, 'slow')).then(dfr.resolve()) 
          }).promise(); 
         }) 
        }).promise(); 
        } 
       //}, 1500) 

       var a = $.when(
        animation()).done(function() { 
        console.log('done'); 
       }); 
      }); 

     </script> 
    </head> 
    <body> 
     <p id="text"> 
      TEXT 
     </p> 
    </body> 
</html>

나는 것을 바란 "console.log ('done')"은 모든 파이프에서만 쓰여졌지만 애니메이션은 시작되지 않습니다!

무엇이 잘못 되었나요?

(내 끔찍한 영어로 유감스럽게도, 내가 코딩하려고하는 것을 이해할 수 있습니다.)

출처

2011-10-27 Davide

이 해결되면 pipe()은 체인의 다음 링크로만 호출되는 문제가 있습니다. 하지만 가장 먼저 할 일은 pipe()입니다. 파이프가 내려 가기 전에 이것이 해결되기를 기다리고 있기 때문에 전화가 걸리지 않습니다.

이러한 문제를 이해하려고해도 같은 문제가있었습니다. 내가 생각하기에이 방법에 접근하는 방법에 따라 다소 직관력이 떨어지지 만 파이프를 호출하기 전에 resolve()dfr해야합니다. 코드는 나를 위해 작동합니다. 변경 사항은 다음과 같습니다.

  function animation() { 
       return $.Deferred(function(dfr) { 
        dfr.resolve(); 
        dfr.pipe(function() { 
         ...

출처

2012-03-06 07:23:29 hippietrail

jQuery 지연 체인

답변

관련 문제