上/下移动时颜色变化

Question

I have a little problem with that JS..

-Have a divs and this is changing automatic in row where they are changing randomly...

• I need to change the color to green for the the div which is moving up..
• And for div which is moving down to change for red..

I tried to do that but i did just that while moving up and down change same color..

So should i did a class or id to check the divs position and in JS set something like :

... check the position of div ... if moving up like change the position to lower value change 'green' ... else change to lower value like from '2' to '5' change for 'red'

Here is the sample how its work now: CLICK HERE FOR SAMPLE

Here is the main file for JS:MAIN JS FILE for MixItUp

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

 *{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background: #68b8c4; } .mix.category-1 { height: 50px; } #Container .mix { border: 1px solid black; margin-top: 1px; background-color: white; } .container{ padding: 20px 0 0; text-align: center; font-size: 0.1px; margin-left: 35%; -webkit-backface-visibility: hidden; } .container:after{ content: ''; display: inline-block; width: 100%; } .container .mix, .container .gap{ display: inline-block; width: 49%; } .container .mix{ text-align: center; margin-bottom: 0; display: none; } .container .mix:after{ content: attr(data-myorder); color: black; font-size: 16px; display: inline-block; vertical-align: top; padding: 4% 6%; font-weight: 700; } .container .mix:before{ content: ''; display: inline-block; padding-top: 60%; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9"></script> <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>

Answer 1

Here is the corrected 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);
});

Hope this helps!