使用 jQuery 触发的多个动画 onScroll 事件

Question

我有一个功能可以在滚动到视图时淡化特定的 DIV。我在这些 DIV 中有一些子元素，我想在每个淡入淡出动画结束时对其进行动画处理。如何在以下函数中添加其他函数？

$(window).scroll(function(d,h) {
tiles.each(function(i) {
    a = $(this).offset().top + $(this).height();
    b = $(window).scrollTop() + $(window).height();
    if (a < b) $(this).fadeTo(500,1) ???AND SLIDE CHILD ELEMENT ALSO!!???;
    ///how to I target each child element to do something in the above line???
    });
});

这是一个jsFiddle DEMO，它将帮助您形象化我的概念。动画已经起作用，问题是滑动子元素最初开始，我想做的是在每个 onScroll 淡入淡出开始时连续启动每个滑动功能。提前非常感谢。这将极大地帮助我解决我在使用 jQuery 时遇到的困难！

Answer 1

如果你想在淡入淡出完成后做一些事情，创建一个回调函数，当动画结束时触发：

var that = $(this);
if (a < b) $(this).fadeTo(500,1, function() {
    alert ("Do something afterwards");
    that.children().someAction();
});

我希望，这就是你想要的。

为了让你的例子正常工作，你可以使用这个：

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        var that = $(this);
        if (a < b && true != $(this).data('faded')) {
            $(this).data('faded', true).fadeTo(500,1, function() {
                that.find('div').animate({left: '+=300', top: '+=12'}, 4500);
            });
        }
    });
});

这是一个演示：http://jsfiddle.net/mSRsA/