Преобразование из GSAP Jquery в GSAP Javascript

Question

мне нужно изменить -

$(function() { 

    $(".nav-1").hover(function() { 
      TweenMax.to($(this), 0.2, {scale:1.2}); 
     }, 
     function() { 
      TweenMax.to($(this), 0.2, {scale:1}); 
     } 

    ); 

}); 

В JavaScript?

Это мой HTML -

<h1 id="animate1"> 
    <div class="nav-1">T</div> 
    <div class="nav-1">R</div> 
    <div class="nav-1">U</div> 
    <div class="nav-1">S</div> 
    <div class="nav-1">T</div> 
    <div class="nav-1">E</div> 
    <div class="nav-1">D</div> 
    <div class="nav-1">S</div> 
    <div class="nav-1">E</div> 
    <div class="nav-1">R</div> 
    <div class="nav-1">V</div> 
    <div class="nav-1">I</div> 
    <div class="nav-1">C</div> 
    <div class="nav-1">E</div> 
</h1> 

Есть ли способ для анимации для переключения между буквами, не парить над каждой буквой?

Любая помощь будет приниматься в значительной степени.

Answer 1

Jquery к чистому JavaScript:

В вашем яваскрипта блоке кода Ниже приводится стенограмма из Jquery $(document).ready функции.

$(function() { 
    // this will execute after document is ready 
}); 

Адрес document ready equivalent without jquery.

Вы можете использовать mouseentermouseleave события вместо функции зависания jquery.

Анимация круг через без зависания:

http://jsfiddle.net/shishirmorshed/ke24sagj/

Answer 2

Это должно быть очень простым процессом для вас. Вы можете использовать это для Rollovers: document.getElementById ("yourObject"). AddEventListener ("mouseover", rollOverAni); document.getElementById ("yourObject"). AddEventListener ("mouseleave", rollOutAni);

, и с помощью GSAP вы можете легко вводить элементы точно так же, как JQuery, например: TweenMax.set ("# MyBox", {left: "- 100%"});

- чехлы