jQuery-运行功能，即使之前的功能尚未触发。

Question

This is a snippet within a toggle() function. I have a header that when clicked, makes the headers below slide down creating space for the clicked headers content to fade in.

There works fine but I am having a problem with the header at the bottom of the stack. There isn't a header below it to move down so the following function which fades the contents in, doesn't fire.

I want to keep the general structure of the headers sliding down THEN the fade in function is fired.

$(currentHeader).next('li.header')
        .animate({ marginTop: itemHeight + 15 }, 1000, function ()
        {
            $(this).prev('ul#work-headers li').find('ul').fadeIn(500);
        });

Any help would be much appreciated.

Answer 1

I would say there are 2 solutions to this:

The quick and dirty:

Add an empty LI-tag:

<li class="header" style="display:none;"></li>

Or change the code to code to add the margin to either the UL's or some div after each LI & UL pair.

Answer 2

I can't really test this so you'll have to work out the kinks, but the basic idea is to encapsulate the logic you want, so that it can be invoked separately from the animation that doesn't fire in some cases.

var fadeIn= function(content) {
                    $(content).find('ul').fadeIn(500);
                }  
var next = $(currentHeader).next('li.header');

if(next.length>0) {
    next.animate({ marginTop: itemHeight + 15 }, 1000, function ()
        {
            fadeIn($(this).prev('ul#work-headers li'));
        });
}
else {
    fadeIn($(this).find('ul#work-headers li'));
}

edit - like @Holger's idea better to be honest