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/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);
});

已更新：https://jsfiddle.net/TrueBlueAussie/w8cmvu1m/6/

我使用 deferreds 和 promises 纠正了双重回调问题，但对解决方案不满意：

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

jQuery - 在单个函数上循环多个动画/创建动画数组，以便每个动画都不同，然后重新开始

jQuery - cycle through multiple animations on single function / create array of animations so every animation is different and then it starts over

arrays

animation

fade

cycle