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); 
    }); 

    });