動畫完成後調用函數

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。您爲邊距屬性設置了一個轉換。擦除，你的JS工作正常。