DIV＆動畫

Question

當我創建一個菜單DIVs與JS動畫，我發現自己複製/粘貼相同JS和CSS代碼菜單的每個按鈕。 有沒有辦法一次創建動畫JS代碼和CSS樣式代碼，並在需要時爲我的網站上可能具有的任何按鈕調用它們？

Answer 1

通過將動畫拉入函數來模塊化代碼，然後將其應用於特定類的所有按鈕（或任何其他類）。就像這樣：http://jsfiddle.net/agconti/9299P/

HTML

<button class="my-btn-class"></button> 

CSS：

.my-btn-class { 
    /* no stylings just a target*/ 
} 

JS：

在小提琴例

function myAnimation(btn) { 
    //do stuff to btn 
    $(btn).animate({ 
     opacity: 0.25, 
     left: "+=50", 
     height: "toggle" 
    }, 5000, function() { 
     // Animation complete. 
    }); 
} 
    $(function() { 
     $(document).on("click", ".my-btn-class", function (e) { 
      e.preventDefault(); 
      myAnimation(this); 
     }); 
    }); 

你可以粘貼JS動畫側面爲0​​功能。這樣，每個按鈕類型my-btn-class將單擊時執行相同的動畫。模塊化您繼續在網站中重複使用的代碼是一種最佳做法。這種方式可以輕鬆維護代碼，因爲它全部在一次。