Color changing while moving Up/Down

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>

Please add the relevant code directly to your question – brandonscript Oct 11 '15 at 16:12 — brandonscript, Oct 11 '15 at 16:12

score 1 · Accepted Answer · answered Oct 11 '15 at 17:05

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!

And if i want to set a fadeOut to red color because it fade out whole row in but thanks a lot u're my hero it works perfectly — liborza, Oct 11 '15 at 17:36
Glad that it helped you. For fading effect, you can try this: [link] (http://stackoverflow.com/questions/19441806/fade-in-background-color-using-jquery) — Vikas Baru, Oct 11 '15 at 17:48
I tried this .animate({backgroundColor: "#green"}, 'slow') and its not work... the color doesnt appear in... — liborza, Oct 11 '15 at 20:17

Color changing while moving Up/Down

1 Answers1