Проблема с анимацией jQuery

Question

У меня есть вложенный список и скрипт jQuery, показанный ниже, чтобы показать / скрыть каждый список отдельно (+/- ссылка) и показать / скрыть все списки одновременно (показать все / скрыть подкатегории). Когда я использую show () и hide (), он работает как положено, но когда я использую анимацию (например, show ('slow') или slideDown ()), я получаю странную проблему. При выполнении:

1-показать все
2-х спрятанные азиатские
3 - скрыть все
4 шоу азиатских

все азиатские подкатегории видны, хотя на шаге 3 все закрыто.

Похоже, проблема в линии

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

на шаге 4, прямо перед этой строкой все дети азиата скрыты, как и ожидалось, но после нее все они видимы, при этом должны быть видны только первые дети (с уровнем level0).

В качестве теста я также изменил цвет элемента, выбранного с помощью того же селектора. После шага 4 азиатские подкатегории уровня 1 отображаются черным цветом, как и ожидалось, но видны Кажется, что анимация также относится к дочерним элементам выбранного элемента ...

Я мог бы что-то упустить, но поскольку при использовании просто show () и hide () это ведет себя как ожидалось, я подумал, что это может быть ошибкой.

Кто-нибудь может помочь?
спасибо

1022 * июль *

Вот сценарий:

$('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;
    }         
);

и 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

Хорошо, я узнал.

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

применяется только к видимому элементу, поэтому я добавил обычный hide (). Вот код:

 $('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;
    }         
);

Answer 2

Вы пробовали объединить в цепочку эффекты?

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

// ...

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