loop in javascript

Question

function DC() {
    var elements = $(".panel");
    elements.first().fadeOut(1000, function() {
        $(this).insertAfter(elements.last());
        $(this).fadeIn(1000);
    });
}

$(document).ready(function() {
    var i =0;
    for (var i=0; i < 10; i++) {
        DC();
    };
});

I want DC() to loop 10 times, but it only looped once.

What did I do wrong?

Answer 1

DC starts a fadeOut 10 times in a row. If you want your elements to fade out and back in 10 times then you should call DC as fadeIn's callback.

elements.first().fadeOut(1000, function() {
    $(this).insertAfter(elements.last());
    $(this).fadeIn(1000, DC);
});