从浅到深动态地改变颜色

Question

I have a function that currently changes a series of div from dark to lighter, but I want to reverse it so it goes from light to dark.

It would be great if someone could help me. Thanks

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

Juste change + with - :

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

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

Answer 2

(i + 10) => loop iterates from start to end. to reverse the order, use .scroll-section length as len - (i + 10) .

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

check the fiddle

Answer 3

Try using it as:

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>