jQuery swapsies 不适用于多次移动

Question

我已经用 jQuery 换卡了。我想让交换播放直到数组一个一个地具有值

我做了基于数组的函数。

我该如何克服这个问题结果应该是一旦数组中的第一对被交换然后第二对应该开始交换

我也看到了一些回调函数的例子，因为 jquery 插件 JQuery Swapsies plugin 交换完成后返回回调函数

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>

脚本

<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>

Answer 1

我使用递归函数动态创建交换选项查看 link

http://plnkr.co/edit/fmDsGTcmIMy2ppobRD8v?p=preview

// Code goes here
 $(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'];
    
   $('#'+swapperarray[0][0]).swap(createOptions(swapperarray))

             
});
    
function createOptions(swapperarray){
   var obj = {};
   var pair = swapperarray.shift();
    obj.target = pair[1];
    obj.opacity = "1";
    obj.speed = 1000;
  if(swapperarray.length > 0)
  {
    obj.callback = function (){ /* add class to div here*/ $('#'+swapperarray[0][0]).swap(createOptions(swapperarray)) }
  }
  else 
  {
    obj.callback = function (){ /* add class to div here*/}
  }
  return obj;
}

.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%;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://biostall.com/wp-content/uploads/2010/07/jquery-swapsies.js"></script>

   
    <div class="Blocks">
      <div class="cards" id="div_1">
        div1
      </div>
      <div class="cards" id="div_2">
        div2
      </div>
      <div class="cards" id="div_3">
        div3
      </div>
      <div class="cards" id="div_4">
        div4
      </div>
      <div class="cards" id="div_5">
        div5
      </div>
      <div class="cards" id="div_6">
        div6
      </div>
      <div class="cards" id="div_7">
        div7
      </div>
      <div class="cards" id="div_8">
        div8
      </div>
      <div class="cards" id="div_9">
        div9
      </div>
    </div>
    <div class="actionbar">
      <a href="javascript://" class="go-swap" >Go Swap!</a>
    </div>

jQuery swapsies 不适用于多次移动

jQuery swapsies does not work for multiple moves

css

jquery

bubble-sort

jquery-effects