JS fadeOut行背景颜色

Question

我试图改变BG颜色以换行，回到白色..但是不成功 所以我需要这样的东西：

• 随机更改行的位置：确定
• 如果行将位置更改为更高，则将颜色更改为绿色..：确定
• FadeOut绿色在1s内变回白色......： NOPE

我尝试了以下方法：

  

以下是 SAMPLE ：enter link here

＆＃13;

＆＃13;

$(document).ready(function () {
  var mixit = $('#Container').mixItUp({
    load: {
      sort: 'random'
    },
    layout: {
      containerClass: 'list',
      display: 'block'
    }
  });

  function loop() {
    var arr = [];
    i = 0;
    $('.mix').each(function(){
      arr[i++] = $(this).data('myorder');
    });
    mixit.mixItUp('sort', 'random');

    mixit.on('mixEnd', function(e, state){
      var arr2 = [];
    i2 = 0;
    $('.mix').each(function(){
      arr2[i2++] = $(this).data('myorder');
    });
    for(i=0; i<i2; i++){
      for(j=0; j<i2; j++){
        if(arr[i]==arr2[j]){
          if(i<j){
            $('.mix').eq(j).css("background-color", "white");
          }
          if(i>j){
            $('.mix').eq(j).bgColorFade({
    time: 1000
});
          }
        }
      }
    }
    });
  };

  var looper = setInterval(loop, 5000);
});

$.fn.bgColorFade = function(mixcolor) {
    // starting color, ending color, duration in ms
    var options = $.extend({
      start: 'green',
        end: 'white',
      time: 500
    }, mixcolor || {});
    $(this).css({
        backgroundColor: options.start
    }).animate({
        backgroundColor: options.end
    }, options.time);
    return this;
};

＆＃13;

<div id="Container" class="container">
  <div class="mix category-1" data-myorder="1"></div>
  <div class="mix category-1" data-myorder="2"></div>
  <div class="mix category-1" data-myorder="3"></div>
  <div class="mix category-1" data-myorder="4"></div>
  <div class="mix category-1" data-myorder="5"></div>
  <div class="mix category-1" data-myorder="6"></div>
  <div class="mix category-1" data-myorder="7"></div>
  <div class="mix category-1" data-myorder="8"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

和：

＆＃13;

＆＃13;

$(document).ready(function () {
  var mixit = $('#Container').mixItUp({
    load: {
      sort: 'random'
    },
    layout: {
      containerClass: 'list',
      display: 'block'
    }
  });

  function loop() {
    var arr = [];
    i = 0;
    $('.mix').each(function(){
      arr[i++] = $(this).data('myorder');
    });
    mixit.mixItUp('sort', 'random');

    mixit.on('mixEnd', function(e, state){
      var arr2 = [];
    i2 = 0;
    $('.mix').each(function(){
      arr2[i2++] = $(this).data('myorder');
    });
    for(i=0; i<i2; i++){
      for(j=0; j<i2; j++){
        if(arr[i]==arr2[j]){
          if(i<j){
            $('.mix').eq(j).css("background-color", "white");
          }
          if(i>j){
            $('.mix').eq(j).animate({backgroundColor: "green"}, 1000);
          }
        }
      }
    }
    });
  };

  var looper = setInterval(loop, 5000);
});

＆＃13;

＆＃13;

＆＃13;