转换从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：

在JavaScript代码块之后是的jquery $(document).ready功能的简写。

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

这里是document ready equivalent without jquery。

您可以使用mouseenter & mouseleave事件而不是jquery悬停功能。

动画圈通过无悬停：

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

Answer 2

这应该是你一个非常简单的过程。您可以将此用于Rollovers： document.getElementById（“yourObject”）。addEventListener（“mouseover”，rollOverAni）; （“yourObject”）。addEventListener（“mouseleave”，rollOutAni）;

就使用GSAP而言，您可以像Jquery一样方便地输入项目，例如： TweenMax.set（“＃MyBox”，{left：“ - 100％”}）;

--cheers