255 Uncaught ReferenceError: $ is not defined after adding 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 对象用“$”变量引用

确保将 jQuery PRIOR 加载到 ScrollMagic，以便 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 这样的公共库的一个好处是，用户很有可能已经将它从其他网站缓存在他们的浏览器中 activity 并且如果缓存了，浏览器就不需要再加载了。

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>

255 Uncaught ReferenceError: $ is not defined after adding ScrollMagic

255 Uncaught ReferenceError: $ is not defined after adding ScrollMagic

javascript

jquery

html

scrollmagic