Question

I’ve made a jsfiddle to make it simpler for me to explain. (http://jsfiddle.net/FPznm/).
What I’m trying to do is that when you click the ‘Visa mer’ button at the end of the table I want the hidden rows to be faded in with a delay.

It does not work as it currently is and I don’t know why. (See the Javascript window on jsfiddle).

The problem is that if I add an .delay() before .fadeIn() the fadeIn() effect disappears but they still gets displayed.

  for (i = 0; i <= increaseBy; i++) {
        hidden.eq(i).delay(i * 20).fadeIn(500);
        hidden.eq(i).removeClass("hidden");
    }

This is the code where the trouble is at. I’m figuring that .eq() is what’s making it not work.

Answer 1

The problem is that the animation is asynchronous, so you are removing the class instantly

Try this instead..beware that table rows do not animate well

$("td.showMore").on('click', function() {
        var hidden = $("tr.hidden"),
            increaseBy = 5;
        for (i = 0; i <= increaseBy; i++) {
            hidden.eq(i).delay(i * 200).fadeIn(1000, function(){ 
                   $(this).removeClass("hidden");
            });

        }
    });

EDIT: Also note that your delay of 20 is 20ms which 1/50th of a second, the human eye can’t even register that