變色而向上/向下移動

Question

我有一個小問題與JS ..

- 具備一個divs而這種情況正在改變自動行，他們是隨機改變...

• 我需要更改顏色以綠色環保爲的div這是動了起來..
• 而對於div這是向下移動改變爲紅色..

我想這樣做，但我就是這樣做的，而上下移動改變顏色相同..

這樣，我做了一個class或id檢查的div位置和JS設置是這樣的：

。 .. check DIV 的位置... if向上移動樣變的位置到較低值變化的「綠色」 ... else變化等較低的值從「2」至「5」變化爲「紅色」

這裏是怎麼樣，現在它的工作：CLICK HERE FOR SAMPLE

這裏是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

以下是更正後的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); 
}); 

希望這有助於！