Jquery - Pseudo-recursive function with "this" element

Question

I'm trying to apply a cool animation effect on a list with Jquery using a pseudo-recursive function.

It works pretty well for the first item, but after the first loop, the this which was selecting #column-left section becomes the li so of course, the function does not find the next li:hidden because it is already inside. Is there a way for me to come back to my original this once the "this" has changed or maybe do something different ?

$("#column-left section").mouseenter(function fadeItem(){
console.log(this);
$(this).find('ul li:hidden:first').delay(500).fadeIn(fadeItem);
});

Thank you very much for your help.

Answer 1

How about after the .fadeIn() trigger a mouseenter event on the parent section element:

$("#column-left section").mouseenter(function () {
    $(this).find('ul li:hidden:first').delay(500).fadeIn(function () {
        var $this = $(this);

        //check to make sure there are more hidden `<li>` elements
        if ($this.siblings('li:hidden').length > 0) {

            //trigger a `mouseenter` event on the parent `section` element to continue the queue
            $this.parents('section').trigger('mouseenter');
        }
    });
});

Here is a demo: http://jsfiddle.net/bhTnL/2/