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()); 
});