GSAP 脚本标签正常但不工作答案

【问题标题】：GSAP script tags are in order but not workingGSAP 脚本标签正常但不工作
【发布时间】：2020-11-17 07:52:31
【问题描述】：

无论脚本的顺序如何，无论我尝试什么，GSAP 似乎都无法正常工作。我尝试了多种 jQuery 和 GSAP 变体。有人可以提供一个工作示例吗？

 <!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
     
    </head>
    <body>

       <div class = "gsap">
        x
       </div>

       <button onclick = "gsap()">run gsap</button>

       <script>
        function gsap() {
            gsap.to(".gsap", {duration: 2, x: 300});
        }
    </script>
    </body>
</html>

【问题讨论】：

在此处查看示例stackoverflow.com/a/64817961/10968134
谢谢先生！

标签： javascript html gsap

【解决方案1】：

问题是您正在加载旧版本的 GSAP（坏）但尝试使用 GSAP 的新语法（好）。加载最新版本的 GSAP，一切顺利。目前是：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

您始终可以从the front page of the GreenSock website 或任何 CDN 获取最新的 CDN 链接。

要调试此类错误，请查看您的资源是否加载到开发人员工具的网络面板中。

不建议像在 HTML 中那样使用内联事件侦听器。请改用.addEventListener()。

【讨论】：