jquery.animate回调追加两次

Question

我正在使用animate和append来做一些动画，动态删除一些html，然后在动画之后添加一些新的html。由于某些原因，追加函数被调用了两次，这是非常不可取的。为什么？

(我使用的是bootstrap，因此使用col9类)

    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

原因是第一个动画函数有两个元素，这意味着回调函数会被调用两次，一次用于gif容器，一次用于文本容器。

正确的方法是将它们分开，并将回调函数放在最后一个中，如下所示：

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

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