jQuery的動畫動畫效果後生效，之後動畫效果

Question

$("#page1 .textblock.hidden").fadeIn('fast').animate({ 
    'marginTop': textblockpan - ($("#page1 .textblock").height()/2), 
}, 1500, function() { 
    $(".title").fadeIn(500, function() { 
     $("#building").animate({ 
      width: "147px", 
      height: "147px" 
     }, 1000, function() { 
      $("#info001").animate({ 
       width: "147px", 
       height: "147px" 
      }, 1000) 
     }); 
    }); 
}).removeClass('hidden').addClass('visible');  

發現一個好的起始碼爲一些jQuery效果和教訓here你應該如何讓經過另外一個jQuery的效果開始。上面的代碼工作正常：我的文本塊動畫，標題淡入，#building股利變得更大。所以前三種效果以正確的順序出現。但似乎是我失去控制插入第四個效果（動畫#info001）。有人可以告訴我，如果代碼看起來不錯，或者確實我在所有的){){{)){中迷路了嗎？

Answer 1

我不能發現你的代碼有什麼問題，所以我猜這個問題在其他地方。確保#info001具有某種可以採用寬度和高度的佈局（例如，block而不是inline）。

Answer 2

嘗試在.animate（）的前面添加.stop（）並查看。

$("#page1 .textblock.hidden").fadeIn('fast').animate({ 
    'marginTop': textblockpan - ($("#page1 .textblock").height()/2), 
}, 1500, function() { 
    $(".title").fadeIn(500, function() { 
     $("#building").stop().animate({ 
      width: "147px", 
      height: "147px" 
     }, 1000, function() { 
      $("#info001").stop().animate({ 
       width: "147px", 
       height: "147px" 
      }, 1000) 
     }); 
    }); 
}).removeClass('hidden').addClass('visible');