TweenMax가 애니메이션을 적용하지 않습니다. (GSAP)

스크립트 코드를 HTML 파일에 작성하면 애니메이션이 작동합니다. 그러나 애니메이션 코드가 js 파일에 있으면 작동하지 않습니다. 여기에 HTML 파일에 무엇을 여기 내 애니메이션 코드TweenMax가 애니메이션을 적용하지 않습니다. (GSAP)

$(document).ready(function(){ 
    $(window).on("load", function() { 
     var cow = document.getElementsByTagName("cow"); 

     TweenMax.to(cow, 2, {top:"1200px",ease: Back.easeOut}); 
} 

)})

입니다.

<!DOCTYPE html> 
<html> 
<head> 

    <link rel = 'stylesheet' type = 'text/css' href = 'cow.css'/> 
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js">  
    </script> 

    <script type="text/javascript" src = 'showanimationcow.js'></script> 

</head> 
<body> 
    <img id = "cow" src ="http://cdn.snappages.com/adwr7m/theme/338649/images/ 
    13179326871659847108SimpleCowArt.svg.hi_1393086508.png"> 
</body>

대단히 감사합니다.

출처

2014-05-16 IsThatYou

당신은 또한,이 $(document).ready 및 $(window).on("load",function() { 동시에 호출 할 필요는 없습니다 document.getElementById("cow")

을 사용해야합니다.

출처

2014-05-16 03:55:56 Alan

작동 예제 : http://jsfiddle.net/yXw4j/18/ – Alan

좋은 답변 제외하고 'ready()'이벤트 내에서 창로드 이벤트를 호출해도 문제가 없습니다. 'ready()'이벤트는 DOM의 준비 여부를 검사합니다. 윈도우로드 이벤트는 창이로드되어 있는지 확인하여 애니메이션을 적용하기 전에 ''이 완전히로드 된 것을 알기 때문에 발생합니다. 창로드 이벤트는 이미지, 스타일 시트, 자바 스크립트 파일, 글꼴, 링크 및 기타 외부 자산이로드되는지 확인합니다. 때로는 DOM 이벤트가 준비되기 전에 윈도우 이벤트가 발생하거나, 서버, 애셋로드 등으로 인해 기다리는 경우가 있습니다. –

TweenMax가 애니메이션을 적용하지 않습니다. (GSAP)

답변

관련 문제