問題與jQuery動畫

Question

我有一個嵌套列表和下面顯示的jQuery腳本分別顯示/隱藏每個列表（+/-鏈接）和一次顯示/隱藏所有列表（顯示所有/隱藏子類別）。當我使用show（）和hide（）時，它按預期工作，但是當我使用動畫（例如，show（'slow'）或slideDown（））時，我遇到了一個奇怪的問題。當這樣做的：

1 - 顯示所有
2隱藏亞洲
3隱藏所有
4顯示亞洲

的亞洲所有子類別是可見的，想到了一切，在步驟3.關閉

看來，這個問題是在該行

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

在步驟4中，只是這一行的所有的孩子像以前一樣伊恩如預期那樣隱藏起來，但之後，他們都是可見的，只有第一個孩子（級別0）應該是可見的。

作爲一項測試，我還改變了使用相同選擇器選擇元素的顏色。 第4步之後，等級爲1的亞洲子類別與預期的一樣黑，但可見。看起來這個動畫也適用於所選元素的子元素...

我可能會錯過某些東西，但是因爲這只是使用show（）和hide（）時的預期行爲，所以我認爲它可能是一個錯誤。

有人可以幫忙嗎？
感謝

七月

這裏的腳本：

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