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(); 
    } 
    ];