jQuery交换不适用于多个移动

我使用jQuery交换卡。我想让交换一直播放到数组有一个接一个的值

我制作了基于数组的函数

我如何克服这个问题？结果应该是，一旦阵列中的第一对被交换，那么第二对应该开始交换

我还看到了一些回调函数的例子，因为jquery插件

jquery交换插件

在交换完成后返回回调函数

HTML

    <div class="Blocks">
            <div class="cards" id="div_1"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_2"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_3"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_4"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_5"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_6"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_7"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_8"><img src="images/ilogo.png"></div>
            <div class="cards" id="div_9"><img src="images/ilogo.png"></div>
    </div>
    <div class="actionbar">
        <a href="javascript://" class="go-swap">Go Swap!</a>
    </div>

CSS

<style>
    .cards {
        width:160px;
        height:200px;
        border:1px solid #00F;
        border-radius:5px;
        float:left;
        margin:5px;
        text-align:center;
        padding:5px;
    }
    .cards img
    {
        width:90%;
        margin-top:10%;
    }
    .Blocks
    {
          display: block;
        width: 550px;
        height: auto;
        float: left;
            clear:both;
    }
    .actionbar
    {
        clear:both;
        float:left;
        width:100%;
    }
</style>

.卡片{
宽度：160px；
高度：200px；
边框：1px实心#00F；
边界半径：5px；
浮动：左；
保证金：5px；
文本对齐：居中；
填充物：5px；
}
.img卡
{
宽度：90%；
利润率最高：10%；
}
.街区
{
显示：块；
宽度：550px；
高度：自动；
浮动：左；
明确：两者皆有；
}
.actionbar
{
明确：两者皆有；
浮动：左；
宽度：100%；
}

脚本

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-swapsies.js" type="text/javascript"></script>

    <script>
    $(document).ready(function() { 

            var swapperarray = [];
            swapperarray[0] = ['div_3', 'div_1'];
            swapperarray[1] = ['div_3', 'div_4'];
            swapperarray[2] = ['div_7', 'div_8'];
            swapperarray[3] = ['div_9', 'div_2'];
            swapperarray[4] = ['div_2', 'div_7'];
            swapperarray[5] = ['div_5', 'div_6'];
            swapperarray[6] = ['div_8', 'div_7'];
            swapperarray[7] = ['div_1', 'div_4'];
            swapperarray[8] = ['div_6', 'div_9'];
            swapperarray[9] = ['div_3', 'div_7'];


            $.each( swapperarray, function( key, value ) {
                 var valuers = value;
                 var arrasssy = valuers.toString().split(",");
                 GoCards(arrasssy[0],arrasssy[1])
            });
    });
    function GoCards(div1,div2)
    {
        //alert("sdv")
        $('#'+div1).swap({  
                    target: div2, // Mandatory. The ID of the element we want to swap with  
                    opacity: "1", // Optional. If set will give the swapping elements a translucent effect while in motion  
                    speed: 1000, // Optional. The time taken in milliseconds for the animation to occur  
                    callback: function() { // Optional. Callback function once the swap is complete  
                    }  
         }); 
    }
</script>

$（文档）.ready（函数（）{
var交换阵列=[]；
交换阵列[0]=['div_3'，'div_1']；
交换阵列[1]=['div_3'，'div_4']；
交换阵列[2]=['div_7'，'div_8']；
交换阵列[3]=['div_9'，'div_2']；
交换阵列[4]=['div_2'，'div_7']；
交换阵列[5]=['div_5'，'div_6']；
交换阵列[6]=['div_8'，'div_7']；
交换阵列[7]=['div_1'，'div_4']；
交换阵列[8]=['div_6'，'div_9']；
交换阵列[9]=['div_3'，'div_7']；
$.each（交换阵列、函数（键、值）{
var估价师=价值；
var arrassy=valuers.toString（）.split（“，”）；
GoCards（arrasssy[0]，arrasssy[1]）
});
});
功能卡（第1部分，第2部分）
{
//警报（“sdv”）
$（'#'+div1）.swap（{
target:div2，//必需。要与之交换的元素的ID
不透明度：“1”，//可选。如果设置，则交换元素在运动时将具有半透明效果
速度：1000，//可选。动画发生所用的时间（毫秒）
回调：function（）{//可选。交换完成后回调函数
}  
}); 
}

我使用递归函数动态创建交换签出链接的选项

//代码在这里
$（文档）.ready（函数（）{
var交换阵列=[]；
交换阵列[0]=['div_3'，'div_1']；
交换阵列[1]=['div_3'，'div_4']；
交换阵列[2]=['div_7'，'div_8']；
交换阵列[3]=['div_9'，'div_2']；
交换阵列[4]=['div_2'，'div_7']；
交换阵列[5]=['div_5'，'div_6']；
交换阵列[6]=['div_8'，'div_7']；
交换阵列[7]=['div_1'，'div_4']；
交换阵列[8]=['div_6'，'div_9']；
交换阵列[9]=['div_3'，'div_7']；
$（“#”+swaperArray[0][0]）.swap（创建选项（swaperArray））
});
函数createOptions（交换阵列）{
var obj={}；
var pair=swaperArray.shift（）；
obj.target=pair[1]；
obj.opacity=“1”；
目标速度=1000；
如果（交换阵列长度>0）
{
obj.callback=function（）{/*在此处向div添加类*/$（'#'+swaperArray[0][0]）.swap（createOptions（swaperArray））}
}
其他的
{
obj.callback=函数（）{/*在此处向div添加类*/}
}
返回obj；
}

.cards{
宽度：160px；
高度：200px；
边框：1px实心#00F；
边界半径：5px；
浮动：左；
保证金：5px；
文本对齐：居中；
填充物：5px；
}
.img卡
{
宽度：90%；
利润率最高：10%；
}
.街区
{
显示：块；
宽度：550px；
高度：自动；
浮动：左；
明确：两者皆有；
}
.actionbar
{
明确：两者皆有；
浮动：左；
宽度：100%；
}

第一组
第二组
第三组
第四组
第五组
第六组
第7课
第8课
第9课

@PunithJain必须剥离的价值将有另外两个子项被剥离，它们必须剥离，并且将相互交换，但工作不正常！！为所有div制作动画后，可以将类添加到所有div。它将在createOptions函数中，对吗？createOptions作为回调函数存在于向div添加类的函数中