动画完成后调用函数答案

【问题标题】：Calling function after animation complete动画完成后调用函数
【发布时间】：2013-05-19 05:58:01
【问题描述】：

我有 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 - 单击右侧的按钮，它应该动画化，调用函数，然后再次动画化。

【问题讨论】：

标签： javascript jquery animation

【解决方案1】：

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

【讨论】：

我向你的发现表示敬意。我永远不会知道。