Question

I have a web interface to a system which has a left navigation. On the navigation, I can expand/collapse some menus. I use jQuery slideUp/slideDown to animate them like this:

if (enable)
{
    navbar_slide_down = true;
    $j(l1_folder).slideDown("normal", function() {
        navbar_slide_down = false;

        on_navbar_animation_complete();
    });
}
else
{
    navbar_slide_up = true;
    $j(l1_folder).slideUp("normal", function() {
        navbar_slide_up = false;

        on_navbar_animation_complete();
    });
}

Both animations run simultaneously to provide an accordion-like effect. This works in nearly all cases.

The problem I’m encountering now is that after performing some actions in a content frame (not the same frame as the navigation), the slideDown and slideUp functions no longer work. The animations start, but stop nearly immediately, and the callback is never fired. This causes the menu to lockup. I can only reproduce this issue in FireFox 3.5.7 (other versions seem OK). If I turn on Firebug, the problem doesn’t occur.

I’ve tried upgrading from jQuery 1.3.2 to 1.4.1, no luck.

Is there any reason the animations would fail and not call the callback? How can I debug this with an unminified jQuery?

Answer 1

The problem was sequence dependent (ie: click on this, and then that, and the hang will occur). I found the problem in the first page:

addEvent(window, 'unload', end_page);

And changed it to:

addEvent(window, 'onbeforeunload', end_page);

I’m still not sure why this would effect the outer frame (and cause jQuery animations to break), but my best guess is that code in the unload handler was running on the second page and conflicting somewhere.