multiple animations triggered onScroll event with jQuery

Question

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???
    });
});

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!!

Answer 1

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);
            });
        }
    });
});

Here's a demo: http://jsfiddle.net/mSRsA/