Problème avec l'animation jQuery

Question

J'ai une liste imbriquée et le script jQuery indiqué ci-dessous pour afficher/masquer chaque liste séparément (+/- link) et afficher/masquer toutes les listes à la fois (afficher tout/masquer les sous-catégories). Quand j'utilise show() et hide(), cela fonctionne comme prévu, mais quand j'utilise des animations (par exemple, show ('slow') ou slideDown()), j'ai un problème étrange. Quand vous faites:

1-Tout afficher
2 cacher asiatique
3 cacher tous
4-show asiatique

toutes les sous-catégories de l'Asie sont visibles, tout pensé est fermé à l'étape 3.

Il semble que le problème est dans la ligne

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

à l'étape 4, juste avant cette ligne tous les enfants comme Les ian sont cachés comme prévu, mais après lui, ils sont tous visibles, seuls les premiers enfants (avec la classe level0) doivent être visibles.

En tant que test, j'ai également changé la couleur de l'élément sélectionné en utilisant le même sélecteur. Après l'étape 4, les sous-catégories asiatiques avec le niveau 1 sont noires comme prévu, mais visibles. Il semble que l'animation s'applique également aux enfants de l'élément sélectionné ...

Je pourrais manquer quelque chose, mais puisque cela se comporte comme prévu en utilisant juste show() et hide(), j'ai pensé que ça pourrait être un punaise.

Quelqu'un peut-il aider?
grâce

jul

Voici le 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; 
    }   
); 

et le code 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

Ok, j'ai découvert. Ne s'applique qu'à l'élément visible, j'ai donc ajouté un masquage normal(). Voici le 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; 
    }   
); 

Answer 2

Avez-vous essayé enchaînant les effets ensemble?

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

// ... 

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