255 Uncaught ReferenceError: $ не определено после добавления ScrollMagic - PullRequest
Новая
       12

255 Uncaught ReferenceError: $ не определено после добавления ScrollMagic

0 голосов
/ 03 октября 2018

Я пытался использовать ScrollMagic, но он не работает, когда я проверяю элемент, который выдает это

error255 Uncaught ReferenceError: $ не определено

ЧетноЯ включил все библиотеки в заголовок и реальный скрипт внизу страницы.

Заголовок 

<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-->

Ответы [ 2 ]

0 голосов
/ 03 октября 2018 

$(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>
0 голосов
/ 03 октября 2018

Вы, похоже, не загружаете саму библиотеку jQuery (а ScrollMagic использует jQuery) - а сообщение об ошибке просто говорит вам, что нет объекта jQuery, на который можно ссылаться с помощью переменной "$"

Makeубедитесь, что вы загружаете 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>

Одно из преимуществ загрузки общей библиотеки, такой как jQuery, из CDN (Content Delivery Network) состоит в том, что существует реальная вероятность того, что пользователи уже будут иметь еекэшируется в их браузерах от других веб-операций, и если он кэшируется, браузеру не нужно загружать его снова.

...