jQuery的 - 通過在單一的功能多個動畫週期/創建動畫的陣列，使得每個動畫是不同的，然後將它重新開始

Question

我需要有多個動畫循環，或隨機地改變，每次動畫發生在單個功能。

var items = $(".items").on("click", "div", function() { 
    var not = $.map($(".items div").not(this), function(el) { 
     return $(el).index(".items div") 
    }); 
    var next = not[Math.floor(Math.random() * not.length)]; 
    var index = $(this).index(".items div"); 
    var elems = $(">div", items).toArray(); 
    [elems[next], elems[index]] = [elems[index], elems[next]]; 
    $(this).add(items.find("div").eq(next)).fadeTo(600, 0, function() { 
    items.html(elems).find("div").fadeTo(600, 1) 
    }); 
}); 

我不能：

目前有淡入淡出，我要的是可循環例如淡入淡出，撥動，動畫等

這裏是我的代碼，我需要它是在使用有關這方面的任何地方的任何信息，但我看到了它在一些腳本中使用，感謝很多的想法

Answer 1

初始版本比較簡單，但是稍微竊聽作爲交換效果回調被調用兩次。在底部的新版本：

的jsfiddle：https://jsfiddle.net/TrueBlueAussie/w8cmvu1m/6/

我糾正了雙回調的問題：https://jsfiddle.net/TrueBlueAussie/w8cmvu1m/5/

的轉換在本例中使用.then()

$(function() { 

    // Swap the html of two elements 
    var swap = function($elements) { 
    var val = $elements.eq(0).html(); 
    $elements.eq(0).html($elements.eq(1).html()); 
    $elements.eq(1).html(val); 
    }; 

    // Array of effects functions - each takes 2 jQuery elements and swaps the values while not visible 
    // Each returns a promise that resolves once the animation has completed 
    var effects = [ 
    // fade in/out 
    function($elements) { 
     return $elements.fadeOut(function() { 
     swap($elements); 
     }).fadeIn().promise(); 
    }, 
    // Animate 
    function($elements) { 
     return $elements.slideUp(function() { 
     swap($elements); 
     }).slideDown().promise(); 
    } 
    ]; 

    // Start with a resolved promise 
    var promise = $.when(); 

    // Delegated handler for click on items 
    $(document).on("click", ".items div", function() { 
    // All items except this one 
    var $item = $(this); 
    var $notThis = $(".items div").not($item); 

    // Randomly choose another item 
    var $other = $notThis.eq(Math.floor(Math.random() * $notThis.length)); 

    // Randomly choose an effect 
    var effect = Math.floor(Math.random() * effects.length); 
    promise = promise.then(effects[effect]($item.add($other))); 
    }); 
    var interval = setInterval(function() { 
    var $items = $('.items div'); 
    $items.eq(Math.floor(Math.random() * $items.length)).click() 
    }, 3000); 
}); 

更新排隊使用延期和承諾，但不滿意解決方案：

var effects = [ 
    // fade in/out 
    function($elements) { 
     var def = $.Deferred(); 
     $elements.fadeOut(500).promise().always(function() { 
     swap($elements); 
     $elements.fadeIn(500).promise().always(function(){ 
      def.resolve(); 
     }); 
     }); 
     return def.promise(); 
    }, 
    // Animate 
    function($elements) { 
     var def = $.Deferred(); 
     $elements.slideUp(500).promise().always(function() { 
     swap($elements); 
     $elements.slideDown(500).promise().always(function(){ 
      def.resolve(); 
     }); 
     }); 
     return def.promise(); 
    } 
    ];