Question

Would someone mind giving me a hand and help me out by taking a look at this function and explaining how i could add and execute a callback function after last element is finished fading in. I’m not sure how i’m suppose to fit it in or rework the code to get the result i’m looking for.

code is here Fiddle

Thank you

Answer 1

Using a callback is nothing more than passing a function as an argument, and calling that function at a certain time. As a side note, I suspect you want all .item elements, but .next doesn’t care about the original selector. http://jsfiddle.net/4Pvmq/6/

$(function(){
    elFadeIn('.item', function() {
        alert("done");
    });
});

function elFadeIn(selector, callback) {
    var $items = $(selector);

    // this is the function that's going to be called recursively
    (function fade(i) {
        var $elem = $items.eq(i);

        if($elem.length) {  // there is an element
            $elem.fadeIn('slow', function() {  // fade it
                fade(i + 1);
            });
        } else {  // no elements left
            callback();
        }
    })(0);  // start with first
}