JQuery寬度動畫不運行

Question

我想通過使文本消失，div崩潰，然後與另一個div相反，使用JQuery動畫功能，但東西不工作在下面的代碼中消失和重新出現：

$(currentTab + " > p").animate({ opacity: 0},{ 
     duration: 500, 
     complete: function(){ 

      $(currentTab).animate({width: "0", opacity: 0}, { 
       duration: 500, 
       complete: function(){ 

        $(clickedTab).animate({width: "70%"}, {duration: 500, complete: function(){ 

         $(clickedTab + " > p").animate({ 
          opacity: 1 
         }, 500); 
        }}); 

      }}); 

    }}); 

其中currentTab和clickedTab是我的div編號，如 「＃CT-1」，和我的HTML看起來像這樣：

<div id="ct-1" class="content-div"> 
    <p>aaaaaaaaaaaaaaaaaaaaaaaa</p> 
</div> 
<div id="ct-2" class="content-div"> 
    <p>bbbbbbbbbbbbbbbbbbbbbbbbb</p> 
</div> 

所以第二個動畫完全不運行。我猜這與DOM有關，也許我無法在動畫中訪問父項？也許這跟它沒什麼關係......

在此先感謝！

羅賓

Answer 1

假設currentTab是CT-1和clickedTab是CT-2，所有的動畫在此琴工作：

http://jsfiddle.net/3k0x3c4L/

你贏了」噸注意寬度收縮，除非clickedTab有一個背景，我已經添加在小提琴。