在页面滚动时加载 div 和动画答案

【问题标题】：Load div and animation on page scroll在页面滚动时加载 div 和动画
【发布时间】：2013-09-11 17:14:04
【问题描述】：

我有一组包含动画的 DIV，这些 DIV 在页面加载时被隐藏。这些动画中的每一个都在计时器上运行，但它们在 DIV 隐藏时运行。

这些 DIV 设置为在页面滚动时出现，但此时动画已完成！动画出现后有没有办法加载？

这是我的小提琴：http://jsfiddle.net/fatfrank44/wRfu5/

CSS

#content-wrapper {
height: 500px;
float: left;
visibility: visible;
}
#container, #container2 {
width: 331px;
height: 105px;
margin: 15px;
background-color: #666;
}   
.numbers {
width: 36px;
height: 50px;
background-color: #dc000f;
float: left;
}

HTML：

<div id="content-wrapper">
<div id="container">
            <div class="numbers"></div>
        </div>
        <div id="container2">
            <div class="numbers"></div>
        </div>
</div>

JS：

<script>
    $(document).ready(function() {
        var controller = $.superscrollorama();
        // individual element tween examples
        controller.addTween('#container', TweenMax.fromTo( $('#container'), .25, {css:{opacity:0, scale:0, }, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, scale:1}, ease:Quad.easeInOut}));
        controller.addTween('#container2', TweenMax.fromTo( $('#container2'), .25, {css:{opacity:0, scale:0, }, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, scale:1}, ease:Quad.easeInOut}));
    });
</script>

 <script>
$(document).ready(function () {
$('.numbers').delay(1).animate({
    'margin-left': '100px'
}, {
    duration: 1000,
    queue: true
});
});
</script>

【问题讨论】：

你可以使用'$.when().done();'
嗨#mrash - 我将如何实现这个？谢谢。
this 的帖子不能回答您的问题吗？
非常接近。这通过 css3 类运行动画，不幸的是我所有的动画都是 JS。有没有办法使用类似 '$.when().done();' 来组合上面的 JS正如#mrash 建议的那样？谢谢:)

标签： javascript html

【解决方案1】：

我设法让它与以下代码一起工作。当您向下滚动页面时，它会加载 DIV：

<script type="text/javascript">
$(window).scroll( function() {  
    if ( $(window).scrollTop() > 100 ) {  
       loadDiv();  
    }  
});  
function loadDiv() {  
    $('#container-holder').fadeIn('slow', function() {  
        $(this).fadeTo("slow", 1);  
        $('#container').fadeTo("fast", 1);
        $('.numbers').delay(500).fadeIn({duration:1000, queue:false}).animate({'margin-left':  '100px'}, {duration:1500, queue:false});
    });  
}  
</script>

【讨论】：

你可以阅读$.when() manual获取更多信息，它比延迟和setTimeout更好。或者使用this link 来使用算法。
谢谢#mrash - 我会看看这些链接，感谢您的帮助！

【解决方案2】：

如果我明白你想要做什么......

感谢$(document).ready，您的动画将在页面加载后立即播放。您应该将动画代码放在 addTween 方法中，以便在将元素添加到页面/使其可见后立即开始动画。

【讨论】：