多个动画触发onScroll事件与jQuery [英] multiple animations triggered onScroll event with jQuery

问题描述

我有当滚动到视图变淡特定DIV的功能。我有这些的DIV，我想在每一个动画渐变结束时的动画里面的一些子元素。我怎么可以添加额外的功能，下面的函数内？

I have a function that fades a particular DIV when scrolled into view. I have some child elements inside of these DIVs that I want to animate at the end of each fade animation. How can I add additional functions inside of the below function?

$(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演示，这将帮助您可视化我的概念。动画已经工作，问题是滑子元素最初开始，我想要做的就是启动每张幻灯片功能时，每个onScroll褪色开始，连续。感谢很多提前这一点。这将帮助我走出一吨我的小径和磨难与jQuery !!

Here is a jsFiddle DEMO which will help you visualize my concept. The animations already work, the problem is that the sliding child elements start initially, what I want to do is start each slide function when each onScroll fade starts, consecutively. Thanks a lot in advance for this. This will help me out a ton with my trails and tribulations with jQuery!!

推荐答案

如果你想要做的事衰落完成后，创建一个触发一个回调函数，当动画即将结束：

If you want to do something after the fading is finished, create a callback function that is triggered, when the animation comes to an end:

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

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

I hope, this is what you want.

要得到你的例子，则可以使用这样的：

To get your example working you can use this:

$(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/

这篇关于多个动画触发onScroll事件与jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！