从浅到深动态地改变颜色

Question

我有一个功能，当前可以将一系列div从黑暗更改为更亮，但我想将其反转，以便将其从明亮变为黑暗。

如果有人可以帮助我，那将是很棒的。 谢谢

function color(r,g,b){
 return 'rgb('+r+','+g+','+b+')';
}

for (var i=-10; i < $('#lazyload:eq(0) .scroll-section').length/2 ; i++) {
     var r = 198;
     var g = 198;
     var b = 198;
    $('#lazyload:eq(0) .scroll-section:eq('+(i+10)+')').css('background' , color(r+(i*10),g+(i*10),b+(i*10)) );
};

https://jsfiddle.net/rn3yfp9o/2/

Answer 1

正义改变+与- ：

color(r-(i*10),g-(i*10),b-(i*10)) 
-------^--------^--------^

https://jsfiddle.net/rn3yfp9o/4/

Answer 2

(i + 10) =>循环从头到尾进行迭代。 要反转顺序，请使用.scroll-section length作为.scroll-section len - (i + 10) 。

$('#lazyload:eq(0) .scroll-section:eq('+(len - i - 10)+')').css('background' , color(r+(i*10),g+(i*10),b+(i*10)) );

检查小提琴

Answer 3

尝试将其用作：

function color(r,g,b){
  return 'rgb('+r+','+g+','+b+')';
 }

for (var i=$('#lazyload:eq(0) .scroll-section').length/2; i >=-10  ; i--) {
       var r = 198;
       var g = 198;
       var b = 198;
  $('#lazyload:eq(0) .scroll-section:eq('+(i-10)+')').css('background' , color(r-(i*10),g-(i*10),b-(i*10)) );
 };

Answer 4

 function color(r,g,b){ return 'rgb('+r+','+g+','+b+')'; } for (var i=0; i < $('#lazyload:eq(0) .scroll-section').length ; i++) { var r = 255; var g = 255; var b = 255; $('#lazyload:eq(0) .scroll-section:eq('+i+')').css('background' , color(r-(i*10),g-(i*10),b-(i*10)) ); }; 

 #lazyload{ display: block; height: 100px; width: 100%; } .scroll-section{ width: 5%; height: 100%; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="lazyload"> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> <div class="scroll-section"></div> </div>