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＆amp; mouseleave个事件而不是jquery悬停函数。

动画圈无悬停：

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

Answer 2

这应该是一个非常简单的过程。你可以将它用于翻转： document.getElementById（＆＃34; yourObject＆＃34;）。addEventListener（＆＃34; mouseover＆＃34;，rollOverAni）; document.getElementById（＆＃34; yourObject＆＃34;）。addEventListener（＆＃34; mouseleave＆＃34;，rollOutAni）;

就使用GSAP而言，您可以像Jquery一样轻松输入项目，例如： TweenMax.set（＆＃34;＃MyBox＆＃34;，{left：＆＃34; -100％＆＃34;}）;

- 欢呼声

从GSAP Jquery转换为GSAP Javascript

2 个答案: