JQuery와 애니메이션 효과 후 효과를 애니메이션, 후 일부 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을 배웠습니다. 위 코드는 잘 작동합니다. 내 텍스트 블록이 애니메이션으로 나타나고 제목이 희미 해지고 #building div가 커집니다. 따라서 처음 세 가지 효과가 올바른 순서로 표시됩니다. 하지만 네 번째 효과 (애니메이션 #info001)를 삽입하면 제어력을 잃어 버린 것 같습니다. 누군가 코드가 잘 보이는지 또는 정말로 내가 모든 방법으로 길을 잃었다 고 말할 수 있습니까? ){){{)){?

Answer 1

코드에 문제가있는 부분을 찾을 수 없으므로 문제가 다른 곳에서 발생했다고 생각합니다. #info001에는 너비와 높이가 가능한 일종의 레이아웃이 있어야합니다 (예 : inline 대신 block).

Answer 2

.anate() 앞에 .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');