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/