重複使用jQuery動畫

Question

我需要多次運行一些簡單的動畫。唯一的區別將是div的編號，#MenuBoxB，#MenuBoxC等。有沒有辦法重用下面的代碼？

$("#MenuBoxA") 
    .delay(100) 
    .queue(function(next){ 
    $(this).css('z-index', '3'); 
    next(); 
    }); 

$("#MenuBoxA") 
    .animate({ 
    top: "+=59px", 
    left: "+=20px", 
    width: "-=10px", 
    height: "-=10px" 
    }); 

編輯：動畫應該是這樣的http://jsfiddle.net/b8evsr0m/，我想你會明白我所說的「重複使用」，當你看到那巨大的javascript代碼換貨。

Answer 1

你可以有一個包含id S於SideMenu_XyM格的每一次點擊的div元素和旋轉數組元素的數組如下 -

$(function(){ 
    // array with div ids 
    var array=['MenuBoxA_XyM','MenuBoxB_XyM','MenuBoxC_XyM','MenuBoxD_XyM','MenuBoxE_XyM','MenuBoxF_XyM','MenuBoxG_XyM']; 
    var arrayLen = array.length; 

    // bind click event to SideMenu 
    $('#SideMenu_XyM').click(function(){ 

     $('#'+array[arrayLen-4]).delay(100).queue(function(next){$(this).css('z-index', '3'); next();}).animate({top: "+=59px", left: "+=20px", width: "-=10px", height: "-=10px"}); 

     $('#'+array[arrayLen-3]).delay(100).queue(function(next){$(this).css('z-index', '2'); next();}).animate({top: "+=50px", left: "+=20px", width: "-=10px", height: "-=10px"}); 

     $('#'+array[arrayLen-2]).delay(100).queue(function(next){$(this).css('z-index', '1'); next();}).animate({top: "+=40px", left: "+=20px", width: "-=10px", height: "-=10px"}); 

     $('#'+array[arrayLen-1]).delay(100).queue(function(next){$(this).css('z-index', '0'); next();}).animate({top: "-=268px"}); 

     $('#'+array[arrayLen-7]).delay(200).queue(function(next){$(this).css('z-index', '2'); next();}).animate({top: "+=30px", left: "-=20px", width: "+=10px", height: "+=10px"}); 

     $('#'+array[arrayLen-6]).delay(200).queue(function(next){$(this).css('z-index', '3'); next();}).animate({top: "+=40px", left: "-=20px", width: "+=10px", height: "+=10px"}); 

     $('#'+array[arrayLen-5]).delay(200).queue(function(next){$(this).css('z-index', '4'); next();}).animate({top: "+=49px", left: "-=20px", width: "+=10px", height: "+=10px"}); 

    //rotate array elements position 
    var last = array[arrayLen-1]; 
    for(var i= (arrayLen-1);i>0;i--) 
    { 
     array[i] = array[i-1]; 
    } 
    array[0] = last; 
    }); 
}); 

DEMO