Issue with jQuery animation

Question

hi,

I've got a nested list and the jQuery script shown below to show/hide each list separately (+/- link) and to show/hide all lists at once (show all/hide subcategories). When I use show() and hide(), it works as expected, but when I use animations(eg, show('slow') or slideDown()), I get a strange issue. When doing:

1-show all
2-hide asian
3-hide all
4-show asian

all subcategories of asian are visible, thought everything is closed in step 3.

It seems that the problem is in the line

            $(this).next().show('slow');

in step 4, just before this line all the children of asian are hidden as expected, but after it, they all are visible thought only the first children (with class level0) should be visible.

As a test, I also changed the color of the element selected using the same selector. After step 4, asian subcategories with level1 are black as expected, but visible. It seems that the animation also applies to the children of the selected element...

I might miss something, but since this behaves as expected when using just show() and hide(), I thought that it could be a bug.

Anybody could help?
thanks

jul

Here's the script:

$('ul.subcategory').hide();

$('a.subcategory').click(
    function() {


        if ($(this).next('ul.subcategory').is(':hidden')) {
            $(this).next('ul.subcategory').show('slow');
            $(this).next('ul.subcategory').css('color', 'white');
            $(this).html('–');
        }
        else {
            $(this).next('ul.subcategory').hide('slow');
            $(this).next('ul.subcategory').css('color', 'black');
            $(this).html('+');
        }
    return false;
    }

);

$("a.showall").toggle(
    function() {

        $('ul.subcategory').show('slow');            
        $('ul.subcategory').css('color', 'white');
        $('a.subcategory').html('–');
        $(this).html(' (hide subcategories)');
        return false;
    },

    function() {

        $('ul.subcategory').hide('slow');
        $('ul.subcategory').css('color', 'black');            
        $('a.subcategory').html('+');
        $(this).html(' (show all)');
        return false;
    }         
);

and the HTML:

<ul id="category_region"><span class="category_region">By region </span><a class="showall" href=""> (show all)</a>
    <li><input type="checkbox" name="category" value="1"/>African <a class="subcategory" id="1" href="">+</a>
        <ul class="subcategory level0">
            <li><input type="checkbox" name="category" value="2"/>Algerian</li>
           <li><input type="checkbox" name="category" value="3"/>Senegalese</li>
           ...
       </ul>
    </li>
    <li><input type="checkbox" name="category" value="6"/>Asian <a class="subcategory" id="6" href="">+</a>
        <ul class="subcategory level0">
            <li><input type="checkbox" name="category" value="7"/>East Asian <a class="subcategory" id="7" href="">+</a>
                <ul class="subcategory level1">
                    <li><input type="checkbox" name="category" value="8"/>Chinese</li>
                    <li><input type="checkbox" name="category" value="9"/>Japenese</li>
                    ...
                </ul>
            </li>
            <li><input type="checkbox" name="category" value="10"/>North Asian <a class="subcategory" id="10" href="">+</a>
                <ul class="subcategory level1">
                    <li><input type="checkbox" name="category" value="11"/>Russian</li>
                    <li><input type="checkbox" name="category" value="51"/>Other</li>
                </ul>
            </li>
            ...
        </ul>            
    </li>
    ...
</ul>

Answer 1

Have you tried chaining the effects together?

$('ul.subcategory').show('slow', function() {
  $('ul.subcategories > li').show('slow');
});

// ...

$('ul.subcategories > li').hide('slow', function() {
  $('ul.subcategory').hide('slow');
});

Answer 2

Ok I found out.

$('ul.subcategory').hide('slow');

only apply to visible element, so I added a normal hide(). Here's the code:

 $('a.subcategory').click(
    function() {


        if ($(this).next('ul.subcategory').is(':hidden')) {
            $(this).next('ul.subcategory').show('slow');
            $(this).html('–');
        }
        else {
            $(this).next('ul.subcategory').hide('slow');
            $(this).html('+');
        }
    return false;
    }

);

$("a.showall").toggle(
    function() {

        $('ul.subcategory').show('slow');
        $('a.subcategory').html('–');
        $(this).html(' (hide subcategories)');
        return false;
    },

    function() {

        $('ul.subcategory').hide('slow');
        $('ul.subcategory').hide(); //because the animation does not apply to hidden elements
        $('a.subcategory').html('+');
        $(this).html(' (show all)');
        return false;
    }         
);