Tween 애니메이션이 끝나면 약속을 구현하십시오.

Question

Tween을 사용하여 애니메이션을 만들고 애니메이션이 완료되면 iframe의 src을 설정하기 위해 다른 작업을 실행하고 싶습니다.

나는 약속을 사용해야한다는 것을 알고 있지만,이 경우에 그것을 구현하는 방법을 100 % 확신하지 못하고 있으며, 언젠가는 지금 시도하고 있습니다. 그것은 내가하려고 할 때

Tween.to('#slideshow', 1, { 
    top: '50%' 
}); 

setTimeout(function(){ 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
    }, 800) 

하지만는 그것을 다음은 내가 User Guide에서보고 있어요 무엇을 기반으로

Tween.to('#slideshow', 1, { 
    top: '50%' 
}).done(function(){ 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
    $('.video-one').attr('src', 'https://www.youtube.com/embed/testOne'); 
}); 

Answer 1

를 작동하지 않는 다음 코드로 작동 Tween.js하지 않습니다 지원 약속. 대신 그들이 지정한 콜백을 사용해야합니다. 이 경우 내가 onComplete 당신이 찾고있는 무엇을 추측하고있어 : 공식적으로

Tween.to('#slideshow', 1, { 
    top: '50%' 
}).onComplete(function() { 
    // Code goes here 
}); 

Answer 2

, 이런 종류의 시나리오는 TweenLite의 제작자 GreenSock에서 사람에 의해 (아마도 실수로) 제공됩니다.

설치 jquery.gsap.js와

Good news for anyone using jQuery.animate() - the new jquery.gsap.js plugin allows you to have GSAP take control under the hood so that your animations perform better; no need to change any of your code. Plus GSAP adds numerous capabilities, allowing you to tween colors, 2D transforms (rotation, scaleX, scaleY, skewX, skewY, x, y), 3D transforms (rotationX, rotationY, z, perspective), backgroundPosition, boxShadow, and lots more. You can even animate to a different className!

, jQuery().animate()는 jQuery의 .promise()을 허용 여전히 TweenLite를 사용하여 애니메이션, 그리고 것

자신의 GSAP 다운로드에 TweenLite 함께 제공은 jquery.gsap.js, 그들은 다음과 같이 소개 JQuery와 플러그인입니다 쇠사슬로 묶여서 완성 할 것을 약속드립니다. 당신이 TweenMax/TweenLite의 혜택 표준 jQuery를 .animate()을 쓸 수 있습니다, 지금

<script type="text/javascript" src="/path/to/jquery-x.y.z.min.js"></script> 
<script type="text/javascript" src="/path/to/TweenMax.js"></script> 
<script src="/path/to/jquery.gsap.js"></script> 

:

먼저 jQuery를, TweenMax (또는 TweenLite와 CSS 플러그인)과 jquery.gsap.js 플러그인을 설치 여전히 jQuery 약속을 반환합니다.

function doAnimation() { 
    return $("#myID").animate({ 
     backgroundColor: "#FF0000", // color animation is not provided by raw jQuery. 
     width: "50%", 
     top: "100px", 
     ease: Power2.easeInOut // this is a GSAP easing function 
    }).promise(); 
} 

doAnimation().then(function() { 
    console.log('animation complete'); 
});