TweenMax не анимирует (GSAP)

Если я написал код скрипта в своем html-файле, анимация работает. Но если код анимации находится в js-файле, это просто не сработает. вот мой код анимации

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

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

)})

а вот что в html файле.

<!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>

Я буду очень признателен за вашу помощь!


javascript animation jquery gsap
person IsThatYou    schedule 16.05.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны использовать document.getElementById("cow")

Кроме того, нет необходимости вызывать $(document).ready и $(window).on("load",function() { одновременно.

person Alan    schedule 16.05.2014
comment
Хороший ответ, за исключением того, что вполне допустимо вызывать событие загрузки окна в событии ready(). Событие ready() проверяет, готов ли DOM. Событие загрузки окна проверяет, загружено ли окно, чтобы вы знали, что <img> полностью загружено, прежде чем анимировать его. Событие загрузки окна обеспечивает загрузку изображений, таблиц стилей, файлов javascript, шрифтов, ссылок и других внешних ресурсов. Иногда событие окна срабатывает до того, как DOM будет готов, или наоборот из-за ожидания на сервере, загрузки ресурсов и т. д. - person Jonathan Marzullo; 21.02.2017