Динамически меняют цветную форму света до темноты

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

function color(r,g,b){ 
 
    return 'rgb('+r+','+g+','+b+')'; 
 
} 
 
     \t 
 
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"> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t \t <div class="scroll-section"></div> 
 
    \t </div>

Answer 2

(i + 10) => цикл перебирает от начала до конца. для отмены заказа, используйте .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))); 

Проверьте fiddle

Answer 3

изменение Juste + с -:

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

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

Answer 4

Попробуйте использовать его как:

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))); 
};