jQuery callback after fadeOut not firing

Question

I am still very much learning jQuery/javascript so any pointers and improvements are much appreciated.

I want to hide a div within the callback function of an fadeOut event, however this is not working. Is there anything wrong with the way I am writing this.

function hide() {
    var box = $(this);
    box.children("div").children().fadeOut(500, function() {
        $(this).parent().hide("slow", "easeOutBounce");
    });
};

I am using the Easing and HoverIntent jquery plugins.

Example of my problem

Answer 1

The callback is firing, the problem is that the <div> with the links is being hidden, and then you call a slideUp(). But the moment the <div> is hidden, the containing div has the height as if it were already finished sliding - so you call it to slide up by no amount.

A workaround is to almost fadeOut() the links, then slideup (since they're not fadedout entirely, they still have a height), then hide them completely.

Working example:

http://jsfiddle.net/scFMx/13/

Answer 2

Try to replace all "this" by specify IDs.

Answer 3

It looks like it's firing

box.children("div").children().fadeOut(500, function() {
    console.log($(this).parent().clone());
    $(this).parent().hide();
    console.log($(this).parent());
});

First call to log:

<div class="hidden" style="display:block; ">…</div>

Second call to log:

<div class="hidden" style="display:none; ">…</div>