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/ 나는 이중 콜백 문제를 수정 : 트랜지션이 .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); 
}); 

업데이트하여이 예에서 대기하고https://jsfiddle.net/TrueBlueAussie/w8cmvu1m/5/

지연 및 약속을 사용하지만 솔루션에 만족하지 않습니다.

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