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

アニメーションが完了したら、関数呼び出しを行うために何が欠けていますか?

jsFiddle - 右側のボタンをクリックすると、アニメーションが開始され、関数が呼び出され、再びアニメーションが開始されます。