Javascript 上/下移动时的颜色变化

我对那个JS有点问题

-有一个

divs

，这是一个自动更改的行，它们在其中随机更改

• 我需要将正在向上移动的

  div的颜色更改为绿色

• 对于向下移动以变为红色的

  div

我试着这么做，但我只是在上下移动时改变了相同的颜色

所以我应该做一个

类

或

id

来检查divs的位置，并在JS中设置如下内容：

<代码>检查div的位置 ... <代码>如果向上移动，则将位置更改为较低值更改为“绿色” ... <代码>其他更改为较低的值，如从“2”更改为“5”，更改为“红色”

以下是其工作原理的示例：

以下是JS的主文件：

$（文档）.ready（函数（）{
var mixit=$（“#容器”）.mixItUp({
负载：{
排序：“随机”
},
布局：{
容器类：“列表”，
显示：“块”
}
});
函数循环（）{
mixit.mixItUp（'sort'，'random'）；
};    
var looper=设置间隔（循环，20000）；
});
*{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
身体{
背景：#68b8c4；
}
.mix.1类{
高度：50px；
}
#容器，混合{
边框：1px纯黑；
页边顶部：1px；
背景色：白色；
}
.集装箱{
填充：20px0；
文本对齐：居中；
字体大小：0.1px；
左边缘：35%；
-webkit背面可见性：隐藏；
}
.货柜：之后{
内容：''；
显示：内联块；
宽度：100%；
}
.容器。混合，
.容器.间隙{
显示：内联块；
宽度：49%；
}
.容器.混合{
文本对齐：居中；
页边距底部：0；
显示：无；
}
.容器.混合：之后{
内容：attr（数据myorder）；
颜色：黑色；
字体大小：16px；
显示：内联块；
垂直对齐：顶部；
填充：4%6%；
字号：700；
}
.容器.混合：在{
内容：''；
显示：内联块；
垫面：60%；
}
以下是更正后的js：

$(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", "red");
          }
          if(i>j){
            $('.mix').eq(j).css("background-color", "green");
          }
        }
      }
    }
    });
  };

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

$（文档）.ready（函数（）{
var mixit=$（“#容器”）.mixItUp({
负载：{
排序：“随机”
},
布局：{
容器类：“列表”，
显示：“块”
}
});
函数循环（）{
var-arr=[]；
i=0；
$（'.mix'）。每个（函数（）{
arr[i++]=$（this.data（'myorder'）；
});
mixit.mixItUp（'sort'，'random'）；
mixit.on（'mixEnd'，函数（e，状态）{
var arr2=[]；
i2=0；
$（'.mix'）。每个（函数（）{
arr2[i2++]=$（this）.data（'myorder'）；
});
对于（i=0；i请将相关代码直接添加到您的问题中，如果我想将淡出设置为红色，因为它会使整行淡出，但非常感谢您是我的英雄，它工作得非常好，很高兴它帮助了您。对于淡出效果，您可以尝试以下方法：[link]（）我尝试过此方法。动画（{backgroundColor:#green“}，'slow'））而且它不起作用…颜色不出现在。。。