Question

有没有机会制作我在本教程http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time上看到的这些动画，而不是没有图像的元素（例如一行文本块）？一切正常，但一旦我删除图像，效果就会停止工作。不确定我是否清楚自己。谢谢！

< script >
if (Modernizr.csstransitions) {
    function preloadImages(imgs, callback) {
        var cache = [],
            imgsTotal = imgs.length,
            imgsLoaded = 0;

        $(imgs).each(function (i, img) {
            var cacheImage = document.createElement('img');
            cacheImage.onload = function () {
                if (++imgsLoaded == imgsTotal) callback();
            };
            cacheImage.src = $(img).attr('src');
            cache.push(cacheImage);
        });
    };
    $.fn.trans = function () {
        var t = arguments[0],
            d = arguments[1] || '';
        if (t) {
            $.each(this, function (i, e) {
                $(['-webkit-', '-moz-', '-o-', '-ms-', '']).each(function (i, p) {
                    $(e).css(p + 'transition' + d, t);
                });
            });
        }
    };

    document.write('<link rel="stylesheet" href="animations.css" />');

    $(function () {
        //preload images contained within elements that need to animate
        preloadImages($('.services img, .featured img'), function () {
            $('.services, .featured').appear({
                once: true,
                forEachVisible: function (i, e) {
                    $(e).data('delay', i);
                },
                appear: function () {
                    var delay = 150,
                        stagger = 800,
                        sequential_delay = stagger * parseInt($(this).data('delay')) || 0;

                    $(this).children().each(function (i, e) {
                        $(e).trans(i * delay + sequential_delay + 'ms', '-delay');
                    });
                    $(this).removeClass('animationBegin');
                }
            });
        });
    });
} < /script>

Answer 1

这看起来有点过于复杂。尝试这个我用这个做了一些惊人的事情。他提供了样式表和用于滚动动画的基本JS。

http://www.justinaguilar.com/animations/scrolling.html

Answer 2

该文章和working demo似乎并不完全同步。

我设法让演示工作在fiddle

有几点需要注意：

你可能需要使用修改后的版本。 Located here
jQuery Appear有一些必须依赖于$(window).load的逻辑，因此初始化逻辑必须在就绪处理程序之外运行或触发load。
当所有待处理图像完成预加载时触发了演示的加载动画

直接从原始演示中复制代码并初始化就绪块之外的所有内容，让它在没有图像的情况下工作基本上是摆脱预加载回调的问题：

Demo Fiddle

代码：

$(function () {
    $('.services, .featured').appear({
        once: true,
        forEachVisible: function (i, e) {
            console.log('adding delay: ' + i);
            $(e).data('delay', i);
        },
        appear: function () {
            var delay = 150,
                stagger = 800,
                sequential_delay = stagger * parseInt($(this).data('delay'), 10) || 0;

            $(this).children().each(function (i, e) {
                $(e).trans(i * delay + sequential_delay + 'ms', '-delay');
            });
            $(this).removeClass('animationBegin');
        }
    });
});

滚动时触发动画

2 个答案: