Question

我需要多次运行一些简单的动画。唯一的区别是div的ID，＃MenBoxB，＃MenboxBox等。有没有办法重用下面的代码？

$("#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/，我想你会理解我的所作所为＆＃34;重复使用＆＃34;当你看到那个庞大的javascript代码时。

Answer 1

您可以拥有包含id元素的div个数组的数组，并在每次点击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

重用jquery动画

1 个答案: