从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 hover函数。

无需悬停的动画循环：

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

Answer 2

这对你来说应该是一个非常简单的过程。你可以使用这个来进行翻转: document.getElementById("yourObject").addEventListener("mouseover"，rollOverAni)；document.getElementById("yourObject").addEventListener("mouseleave"，rollOutAni)；

就使用GSAP而言，你可以像Jquery一样轻松地输入条目，例如: TweenMax.set("#MyBox"，{left:"-100%"})；

--干杯