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

时间:2012-11-12 09:56:05

标签: jquery events animation triggers onscroll

我有一个函数可以在滚动到视图时淡化特定的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 !! {/ p>]中完成我的踪迹和磨难

1 个答案:

答案 0 :(得分: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/