jquery.animateコールバックを2回追加します

Question

アニメーションを使用していくつかのアニメーションを行い、いくつかのhtmlを動的に削除し、アニメーションに続いていくつかの新しいhtmlを追加します。何らかの理由で、追加関数が2回呼び出されているため、非常に好ましくありません。どうして？

理由は、最初のアニメーション関数は一度、コールバック関数が2回回呼び出されることを意味し、2つの要素を有していることであった

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

（Iブートストラップ、したがってCOL-9クラスを使用しています） gifコンテナの場合は1回、テキストコンテナの場合は1回です。

それを行うための正しい方法は、それらを分離し、このようなただ最後にコールバック関数を置くために、次のようになります。

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

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