255 未捕获的 ReferenceError：添加 ScrollMagic 后未定义 $

Question

我试图使用 ScrollMagic 但当我检查它给出的元素时它不起作用

error255 Uncaught ReferenceError: $ is not defined

即使我已经在标题中包含了所有库，并在页面底部包含了实际脚本。

标题

<script src="js/ScrollMagic.min.js"></script>
<script src="js/debug.addIndicators.min.js"></script>
<script src="js/animation.gsap.min.js"></script>
<script src="js/animation.velocity.min.js"></script>

脚本

<script>
    $(function () { // wait for document ready
      // init
      var controller = new ScrollMagic.Controller();

      // define movement of panels
      var wipeAnimation = new TimelineMax()
        .fromTo("section.panel.pink", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.red", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.blue", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left
        .fromTo("section.panel.white", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})  // in from left

      // create scene to pin and link animation
      new ScrollMagic.Scene({
          triggerElement: "#designPart",
          triggerHook: "onLeave",
          duration: "300%"
        })
        .setPin("#designPart")
        .setTween(wipeAnimation)
        .addIndicators() // add indicators (requires plugin)
        .addTo(controller);
    });
</script>

我正在使用它的部分。

<div id="designPart">
  <p>Design</p>
  <section class="panel pink">
    <img src="images/pink.png">
  </section>
  <section class="panel green">
    <img src="images/green.png">
  </section>
  <section class="panel red">
    <img src="images/red.png">
  </section>
  <section class="panel blue">
    <img src="images/blue.png">
  </section>
  <section class="panel white">
    <img src="images/white.png">
  </section>
</div><!--designPart-->

Answer 1

您似乎没有加载 jQuery 库本身（并且 ScrollMagic 使用 jQuery） - 并且错误消息只是告诉您没有可使用“$”变量引用的 jQuery 对象

确保在 ScrollMagic 之前加载 jQuery，以便 jQuery 命名空间在 ScrollMagic 需要它之前存在，正如 Snowmonkey 在下面的评论中所述。

您需要从本地源加载 jQuery，例如：

<script src="js/jquery-2.1.1.js"></script>

或从 CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

从 CDN（内容交付网络）加载像 jQuery 这样的公共库的一个优点是，用户很可能已经将它从其他 Web 活动缓存在他们的浏览器中，如果它被缓存，浏览器不需要重新加载它。

Answer 2

 $(function() { var controller = new ScrollMagic.Controller(); var wipeAnimation = new TimelineMax() .fromTo("section.panel.pink", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}) .fromTo("section.panel.green", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}) .fromTo("section.panel.red", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}) .fromTo("section.panel.blue", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}) .fromTo("section.panel.white", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone}); // create scene to pin and link animation new ScrollMagic.Scene({ triggerElement: "#designPart", triggerHook: "onLeave", duration: "300%" }) .setPin("#designPart") .setTween(wipeAnimation) .addIndicators() .addTo(controller); });

 section img { height: 32px; width: 32px; }

 <!-- those are all the libraries required:--> <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TimelineMax.min.js"></script> <div id="designPart"> <p>Design</p> <section class="panel pink"> <img src="https://www.sqlite.org/images/nocopy.gif"> </section> <section class="panel green"> <img src="https://www.sqlite.org/images/nocopy.gif"> </section> <section class="panel red"> <img src="https://www.sqlite.org/images/nocopy.gif"> </section> <section class="panel blue"> <img src="https://www.sqlite.org/images/nocopy.gif"> </section> <section class="panel white"> <img src="https://www.sqlite.org/images/nocopy.gif"> </section> </div>