Jquery 尝试将Staffeto与GSAP一起使用

尝试让我的图像从底部开始：0和不透明度1，并使用绿岩动画交错。我不确定我做错了什么，因为我的代码看起来很有效，也许我盯着它看太久了

我假设find（）没有按我希望的方式工作，因为我没有看到一个包含所有img元素的对象

以下是我的控制台输出的内容：

[prevObject: jQuery.fn.init[0], context: document]

这是我的剧本：

  $(document).ready(function(){
    var mainText = $('ul.images li').find('img');
    console.log(mainText);
    var tween = TweenMax.staggerTo(mainText, 0.75, {
        opacity: '0',
        bottom: '300px',
        left: '50%'
    }, 0.3);
});

这是我的html：

    <ul class="images">
        <li class="image brain"><img src="img/science/brain.svg" class="img brain" alt="cell-watermark-bg"></li>
        <li class="image mitochondria"><img src="img/science/mitochondria.svg" class="img mitochondria" alt="cell-watermark-bg"></li>
        <li class="image microscope"><img src="img/science/microscope.svg" class="img microscope" alt="cell-watermark-bg"></li>
        <li class="image scientist"><img src="img/science/scientist.svg" class="img scientist" alt="cell-watermark-bg"></li>
        <li class="image beaker"><img src="img/science/beaker.svg" class="img beaker" alt="cell-watermark-bg"></li>
        <li class="image beaker-2"><img src="img/science/beaker-2.svg" class="img beaker-2" alt="cell-watermark-bg"></li>
        <li class="image atom"><img src="img/science/atom.svg" class="img atom" alt="cell-watermark-bg"></li>
        <li class="image dropper"><img src="img/science/dropper.svg" class="img dropper" alt="cell-watermark-bg"></li>
        <li class="image dna"><img src="img/science/dna.svg" class="img dna" alt="cell-watermark-bg"></li>
    </ul>

---

问题出在你的SCS上<代码>ul.images{…}实际上没有关闭。我已经关闭了它，动画似乎工作，因为我理解你的问题

注意：我已经将您的js包装为一秒超时，这样您就可以在动画启动之前看到放置在舞台上的元素

---

有点奇怪的是，您的sass编译器没有对您大声说有什么问题。

谢谢。虽然我注意到我不能执行回调函数，但我最终发现它在我发布后不久从未关闭过。我几乎直接从GSAP文档复制了工作副本，但我仍然收到一个类型错误this.callback不存在。我被难住了，开始认为这是一个流星问题，而不是GSAP。您在Meteor中使用gsap回调时遇到问题了吗？不幸的是，我从未使用Meteor，因为客户需求永远不需要它。我真的应该很快开始尝试它：）。我四个月前才开始使用它，一开始使用它我就喜欢它。在我看来，绝对值得一看。再次感谢你的帮助！

    ul.images {
        position: relative;
        .image {
            position: relative;
            width: 100%;
            .img {
                position: absolute;
                height: 50px;
                opacity: 1;
                -webkit-transition: background-color 0.2s ease;
                -moz-transition: background-color 0.2s ease;
                -o-transition: background-color 0.2s ease;
                transition: background-color 0.2s ease;
                &.dna {
                    bottom: -40px;
                    left: -30%;
                }
                &.scientist {
                    bottom: 40px;
                    left: -40%;
                }
                &.atom {
                    bottom: -60px;
                    left: 60%;
                }
                &.cell {
                    bottom: -90px;
                    left: -96px;
                }
                &.brain {
                    bottom: -130px;
                    left: 250px;
                }
                &.dropper {
                    bottom: -120px;
                    left: -20%;
                }
                &.beaker {
                    bottom: -60px;
                    left: 15%;
                }
                &.beaker-2 {
                    bottom: -100px;
                    left: 100%;
                }
                &.mitochondria {
                    bottom: -40px;
                    left: 120%;
                }
                &.microscope {
                    bottom: 45px;
                    left: 110%;
                }
            }
        }