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

Yes, looking at the demo you will instantly know what I want to do. — Jim22150, Nov 12 '12 at 10:00

insertusernamehere · Accepted Answer · 2012-11-12T16:35:04.710

2

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/

edited Nov 12 '12 at 16:35

answered Nov 12 '12 at 15:37

insertusernamehere

23,204
9
87
126

I plugged your code in with no success. I am guessing that it is not going to do what I am trying to achieve because the 'slide' animations need to be tied into an array so each individual SLIDE animation starts with each individual TILE fade on the onScroll event. – Jim22150 Nov 12 '12 at 16:11
psuedo code: when first TILE fades in then scrollMe1 slides, when 2nd TILE fades in then scrollMe2 slides, when 3rd TILE...etc.... – Jim22150 Nov 12 '12 at 16:15
@user1644123 Check the fiddle in the updated answer - I hope I got you right. :) – insertusernamehere Nov 12 '12 at 16:22
@user1644123 Did you test the fiddle? It slides only once. See how I check whether the animation was already running using the `.data()`-method. The fiddle I've added should do what you want. :) – insertusernamehere Nov 12 '12 at 16:34
I don't see where you provided a fiddle demo..? However, look at mine: http://jsfiddle.net/BP6rq/466/ .... I slightly modified your code and it is actually working now!! Everything is perfect... EXCEPT the infinite slide loop... I tried adding .stop() to the end of the line but that broke the code so I took it out. Any thoughts? Thanks!!! – Jim22150 Nov 12 '12 at 16:38
Oh okay, your right, if you quickly scroll once to the div then yes it only slides once but... if you do a scroll down slowing holding mouse click on the scroll bar it makes the slide repeat into a loop.... Weird bug... I am using FF16/windows7. Any idea why this happens?? Thanks again. – Jim22150 Nov 12 '12 at 16:44
Tried it in Safari and in FireFox 16 (both MAC) and it works like a charm. – insertusernamehere Nov 12 '12 at 16:47
Okay... the bug is only apparent on my fiddle, not yours. Yours is complete, great work! Thanks again! – Jim22150 Nov 12 '12 at 16:47

multiple animations triggered onScroll event with jQuery

1 Answers1

Linked