轉換從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