Функция вызова после завершения анимации

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 отлично работает.