jquery - 滚动魔法 : JQuery element is not working for triggerElement

Question

作为文档

The value for triggerElement will be a selector, DOM object or jQuery Object that defines the start of the scene. If undefined the scene will start right at the start of the page (unless an offset is set).

但我认为这不适合我的情况。

我的 HTML 看起来像

....
<section>
    <div class="scrollMagic">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    et dolore magna aliqua. Ut enim ad minim veniam.        
    </div>
    <div class="scrollMagic">
        <img src="abc1.jpg" width="100px" >
    </div>
</section>
<section>
    <div class="scrollMagic">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    et dolore magna aliqua. Ut enim ad minim veniam.        
    </div>
    <div class="scrollMagic">
        <img src="abc2.jpg" width="100px" >
    </div>
</section>
<section>
    <div class="scrollMagic">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
    et dolore magna aliqua. Ut enim ad minim veniam.        
    </div>
    <div class="scrollMagic">
        <img src="abc3.jpg" width="100px" >
    </div>
</section>
....

我想在用户滚动到相应部分时制作动画。下面是我的 JS 代码片段。

  var scrollMagicController = new ScrollMagic.Controller({
    globalSceneOptions: {
      duration: 100
    }
  });

  $("section").each(function(index, elem) {
    var tween = TweenMax.to(elem, 1, {
      ease: SlowMo.ease.config(0.7, 0.7, false),
      opacity: 1,
      repeat: 1
    });

    var childElems = $(elem).find(".magicScroll");
    var scene = new ScrollMagic.Scene({
      duration: 200,
      triggerElement: childElems,
    // offset: -500
    }).setTween(tween).addTo(scrollMagicController);
  });

我的 Firefox 开发者控制台总是出现错误

12:11:02:444 (ScrollMagic.Scene) -> ERROR: Element defined in option "triggerElement" was not found:

我应该怎样才能让它正常工作？

Answer 1

我也应该迭代childElems。下面是我的工作代码，供以后引用。

  $("section").each(function(index, elem) {
    $(elem).addClass("animate-container" + index);
    var tween = TweenMax.to(".animate-container" + index, 1, {
      ease: Back.easeInOut.config(1.7),
      opacity: 1,
    });

    var childElems = $(elem).find(".magicScroll");
    $(childElems).each(function(innerIndex, childElem) {
      $(childElem).addClass("animate" + innerIndex);
      var scene = new ScrollMagic.Scene({
        tweenChanges: true,
        triggerElement: ".animate-container" + index + " .animate" + innerIndex,
        offset: -300,
        reverse: false,
      }).setTween(tween).addTo(scrollMagicController);
    });

  });