Question

I’m trying to get a recursive fadeIn, show or toggle function to work properly, I can’t see where is the error.

HTML:

<table id="myTable"></table>​

JavaScript:

$(function () {
    var showMenu = function (i, callback) {
            if (i > 10) {
                //stop
                return;
            } else {
                $('#myTable').append('<tr id="method_1' + i + '" style="display: none;"><th><label for="id_CAM_1">CMethod (CAM):</label></th><td><select name="CAM_1_' + i + '" id="id_1_' + i + '">        <option value="2">2- canopy</option>        <option value="9">9-canop</option></select>      </td></tr>');
                $('#method_1' + i).fadeIn('1000', showMenu(i + 1, showMenu));
            }
        }
    showMenu(2, showMenu);
})

The problem is that the effect is not being called in the callback, but all at once instead.

Problem

Answer 1

In your fadeIn callback, you have to provide a function, not a function call (what you’re doing). I would suggest:

$('#method_1'+i).fadeIn('1000', function () {
    showMenu(i+1,showMenu);
});

I think that should do it…

Here is a jsFiddle that demonstrates my change: http://jsfiddle.net/mAETY/1/