动画完成后调用函数

Question

我有2个功能可以打开＆amp;关闭我页面上的侧边栏。

function closeSidebar(functionAfterClose) {
        var functionAfterClose = functionAfterClose || function() {};
        $("#sidebar").removeClass("open");
        $("#sidebar").animate({marginLeft: margin*-1},"fast", "swing", functionAfterClose);
        $("#dummy-column").animate({marginLeft: margin*-1},"fast", "swing");
}

function openSidebar() {
        $("#sidebar").addClass("open");
        $("#sidebar").animate({marginLeft:0},"fast", "swing");
        $("#dummy-column").animate({marginLeft:0},"fast", "swing");
}

我正在尝试将close函数传递给closeSidebar（）以在关闭动画完成后运行。但它似乎是直接运行而不是等待侧边栏动画完成。

closeSidebar(function() {
                alert("function called");
                $(this).addClass("current");
                openSidebar();
            });

动画完成后，我错过了什么来进行函数调用？

The jsFiddle - 点击右侧的按钮，它应设置动画，调用该功能，然后再将其设置为动画。

Answer 1

你的javascript是正确的。问题出在CSS中。您已为margin属性设置了转换。删除它，你的JS工作正常。