Question

我正在使用动画并附加做动画，动态删除一些html，然后在动画后附加一些新的html。由于某些原因，追加函数被调用两次，这是非常不希望的。为什么呢？

（我正在使用bootstrap，因此是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

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

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

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

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

jquery.animate回调追加两次

1 个答案: