jquery.animate回調追加兩次

Question

我正在使用動畫和追加來做一些動畫，動態刪除一些HTML，然後追加動畫後面的一些新的HTML。由於某些原因，追加函數被調用兩次，這是非常不可取的。爲什麼？

（我使用自舉，因此COL-9類）

function manageWeather(){ 

     //fade-out effect from loading interface 
     $(".gif-container, .text-container").animate({ 
      opacity: 0 
     }, 1000, function(){ 
      //$(".row-change1").remove(); 
      $(this).remove(resizeMainContainer()); 
     }); 

     //jQueryUI function to animate the main-container resize 
     function resizeMainContainer(){ 
      $(".main-container").animate({ 
       height: "80%" 
      }); 
      $(".main-container").switchClass("col", "col-9", addElements()); 
     } 

     //adding columns to row 
     function addElements(){ 
      $(".row-change1").append("<div class='col-2'>col2</div>") 
      $(".row-change1").append("<div class='col-9'>col9</div>") 
      $(".row-change1").append("<div class='col-1'>col1</div>") 
     } 
    } 

Answer 1

的原因是，第一animate函數具有兩個元件，這意味着該回調函數然後調用兩次兩次，一次爲gif容器和一次爲文本容器。

這樣做將他們分開，並把回調函數在剛剛過去的一個這樣的正確方法：

$(".gif-container").animate({ 
    opacity: 0 
}, 1000, function(){ 
    $(this).remove(); 
}); 

$(".text-container").animate({ 
    opacity: 0 
}, 1000, function(){ 
    $(this).remove(resizeMainContainer()); 
});