JS fadeOut the Row Background Color

Question

I'm trying to change BG color for changing row, back to white.. But unsuccesfuly so i need something like this :

• Change randomly the position of row : OK
• Change the color to GREEN if the row is changing position to higher.. : OK
• FadeOut the Green Color back to white in 1s... : NOPE

I tried the following ways:

Here is a SAMPLE : enter link here

$(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;
};

<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>

and :

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