各リストアイテムの子供の背景をダイナミックに明るくする

Question

私は積み重ねられたメニューをドロップダウンして、徐々に各メニュー項目を徐々に明るくしたい。私はlighten（）ルールを使って手作業で行っていますが、新しいリスト項目の増分ごとに5％増やす方法があるかどうかを知りたいと思います。私はいくつかのjqueryはこれを達成するために結合する必要がありますね。

フィドル：あなたはSASSの@forを使用することができますhttp://jsfiddle.net/k2fjzro4/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="list-item-1">1</li> 
 
    <li class="list-item-2">2</li> 
 
    <li class="list-item-3">3</li> 
 
    <li class="list-item-4">4</li> 
 
    <li class="list-item-5">5</li> 
 
</ul>

Answer 1

。

ul li { 
    padding: 10px; 
    background-color: #333; 
} 

@for $i from 1 through 10 { 
    li.list-item-#{$i} { 
    background-color: lighten(#333, $i*5%); 
    } 
} 

多量のアイテムに対して動的に発生させたい場合は、JSはおそらく避けられないものです。

Answer 2

使用eachとrgba

var opacity = 1; 
 

 
$("ul > li").each(function(index, element){ 
 
    $(element).css("background-color", "rgba(51, 51, 51, "+opacity+")"); 
 
    opacity -= 0.05; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="list-item-1">1</li> 
 
    <li class="list-item-2">2</li> 
 
    <li class="list-item-3">3</li> 
 
    <li class="list-item-4">4</li> 
 
    <li class="list-item-5">5</li> 
 
</ul>

Answer 3

編集：のMichałKostrzyński@は同じ答えを掲載しました。これをCodePenに残しておきます。

これは簡単な叫びで表現できます。for SCSSを有効にしている場合は、javascriptを使用しないでください。

@for $i from 1 through 5 { 
    .list-item-#{$i} { 
     background-color:lighten(#333, 5%*$i) 
    } 
} 

こちらをご覧ください： https://codepen.io/Pauloscorps/pen/aVdrpY

Answer 4

for(var i = 1; i < 6;i++) 
 
{ 
 
    var opacity = 1/6*i ; 
 
\t $('ul').append('<li class="list-item-'+i+'" style="background-color:rgba(0,0,0,'+opacity+')">'+i+'--'+opacity+'</li>'); 
 
    
 
}

ul li { 
 
    padding: 10px; 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
</ul>

多分