javascript - 动画完成后调用函数

Question

我有 2 个函数可以打开和关闭我页面上的边栏。

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

我正在尝试将函数传递给 closeSidebar() 以在关闭动画完成后运行。但它似乎会立即运行，而不是等待侧边栏动画完成。

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

动画完成后调用函数我还缺少什么？

The jsFiddle - 单击右侧的按钮，它应该动画化，调用该函数，然后再次动画化退出。

Answer 1

您的 javascript 是正确的。问题出在 CSS 中。您为 margin 属性设置了过渡。删除它，你的 JS 就可以正常工作了。