ScrollMagic：JQuery的元件没有用于triggerElement

Question

工作作为文档

为triggerElement的值将是一个选择器，DOM对象或jQuery的 对象定义场景的开始。如果未定义，场景 将从页面开始处开始（除非设置了偏移量）。

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

我的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> 
.... 

我想动画的时候用户是滚动到repective部分。以下是我的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); 
    }); 

    });