0

是否有机会制作我在本教程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>
4

2 回答 2

1

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

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

于 2013-09-11T16:49:05.693 回答
0

文章和工作演示似乎并不完全同步。

我设法让演示在小提琴中工作

有几点需要注意：

  • 您可能需要使用小提琴中出现的修改版本。 位于这里
  • 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');
        }
    });
});
于 2013-09-11T20:55:05.767 回答