Question

I was trying to repeat the entire function in a loop but nothing works. I tried Loop () callback, set interval(). Can someone point me to the right direction?

What would be the best method to repeat the entire animation? Thanks

$(document).ready(function() {
    $("#slide1").fadeIn(500, function() {
        $("#slide2").fadeIn(500, function() {
            $("#slide3").fadeIn(500, function() {
                $("#slide4").fadeIn(500, function() {
                    $("#slide5").fadeIn(500, function() {

                        $("#slide1").fadeOut(500, function() {

                            $("#slide6").fadeIn(500, function() {
                                $("#slide7").fadeIn(500, function() {
                                    $("#slide8").fadeIn(500, function() {
                                        $("#slide9").fadeIn(500, function() {});
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
});

Answer 1

@Phillip So what ever you have in the question works now.. you just want the code to be improvised.. Is that correct? – Vega

Hi Vega. Yes the code works nicely but would like the $("#slide1").fadeOut(500, function() { to occur. thanks – Phillip

Converted the code you have like below,

DEMO: http://jsfiddle.net/RuX5d/5/

$(document).ready(function() {
    var i = 1, dir = 1, curFx = 'fadeIn';
    var interval = setInterval(function () {
        if (i == 6 && $('#slide1').is(':visible')) {
            $('#slide1').fadeOut(500);             
            return;
        }

        $('#slide'+ i)[curFx](500);

        i = i + 1*dir;

        if (i == 10 || i == -1) {
            dir = (dir == 1)?-1:1;
            curFx = (curFx == 'fadeIn')?'fadeOut':'fadeIn';
        }        
    }, 500);
});

---

I am not very sure about what you want.. but I believe you want to fadeIn and fadeOut content repeatedly.

If so, try my demo and code below,

DEMO: http://jsfiddle.net/RuX5d/1/

$(document).ready(function() {
    var curSlide = 0, dir = 1;
    var curFx = 'fadeIn';
    setInterval(function () {
        curSlide += 1 * dir;
        $('#slide' + curSlide)[curFx](500);
        if (curSlide == 11 || curSlide == 0) {
            curFx = (curFx == 'fadeIn')?'fadeOut': 'fadeIn';
            dir = (dir == 1)?-1: 1;
        }
    }, 500);
});