jquery - CSS3 动画 - 如何为滚动上的不同元素制作不同的动画

Question

我有一个关于在滚动上做 CSS3 动画的问题..

我找到了一段代码，它在用户向下滚动后显示 DIV 元素:

    <script type="text/javascript">

            $(document).ready(function() {

        /* Every time the window is scrolled ... */
        $(window).scroll( function(){

            /* Check the location of each desired element */
            $('.hideme').each( function(i){

                var bottom_of_object = $(this).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

                /* If the object is completely visible in the window, fade it it */
                if( bottom_of_window > bottom_of_object ){

                    $(this).animate({'opacity':'1'},500);

                }

            }); 

        });

    });

    </script>   

我正在构建一个站点，其中将包含大约 5 个不同的框，当用户向下滚动到每个框时将显示哪个框。 但我的问题是，我如何在这些盒子里制作动画。

例子:每个盒子里都有标题、内容和图片。我如何让所有元素依次出现，因为使用此代码，所有类元素都会同时显示。 但我希望如果用户向下滚动，首先出现标题，然后是内容，最后是图像。

然后当用户滚动到下一个框时，相同的过程会重复。

我使用了一些 CSS3 延迟，但在这种情况下，我不知道用户需要多长时间才能向下滚动。

谢谢!

Answer 1

简单。您首先必须确保标题、图像和内容都在它们自己的 div 中。然后您将执行相同的过程，但使用各个 div 的 y 位置和高度。 Here is a jsFiddle

$(document).ready(function () {
    $(window).scroll(function () {
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        $('.title').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.innerImage').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.content').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
    });
});