Fade in and out using fadeToggle

Asked Apr 03 '13 at 15:18

Active Apr 03 '13 at 15:34

Viewed 187 times

I'm using fadeToggle to fade a couple of images in and out on a loop. Is there a way to start the fading in of image 2 after image 1 is done fading out and so on?

This is the code I'm working with;

$(function() {
    function run_animation($element, delay, duration) {
        $element.delay(delay).fadeToggle(duration, function () {
            run_animation($element, delay, duration);
        });
    }
    run_animation($('.pointer1'), 1000, 1200);
    run_animation($('.pointer2'), 3000, 1200);
    run_animation($('.pointer3'), 4500, 1200);
    run_animation($('.pointer4'), 6000, 1200);
    run_animation($('.pointer6'), 7500, 1200);
    run_animation($('.pointer7'), 9000, 1200);
    run_animation($('.pointer8'), 10500, 1200);
});

edited Apr 03 '13 at 15:34

dfsq

191,768
25
236
258

asked Apr 03 '13 at 15:18

JamesM

2

Perhaps this thread could help out? http://stackoverflow.com/questions/6116597/how-to-wait-for-one-jquery-animation-to-finish-before-the-next-one-begins – SirDerpington Apr 03 '13 at 15:22
perhaps add `$element.next()` in the recursive call? That is if the `img`s are siblings. – Jake Zeitz Apr 03 '13 at 15:28
Can you maybe show me where to use that in my code? I'm very new to this. :P – JamesM Apr 03 '13 at 15:44
Or something like this http://jsfiddle.net/AMRe7/ – dfsq Apr 03 '13 at 15:46
dfsq, that was perfect! Thanks! – JamesM Apr 03 '13 at 15:54

Fade in and out using fadeToggle

0 Answers0