0

コードペンはこちら: http://codepen.io/saltcod/pen/ufiHr

メニューのスタイルを考えています。各アイテムに異なる背景の不透明度を持たせたい - その部分は機能しています。

私が理解できない部分は、アイテム＃5の後に不透明度をリセットする方法です. ループが項目 #6 に到達したら、不透明度を #1 の状態に戻します。

それが意味をなさない場合は、ここに画面があります: http://cl.ly/image/0x3e350H0l0o

基本的に、不透明度を 5 回変更してから、最初からやり直します。

JS:

var menuItems = $('li a');

menuItems.each(function(index, value){
  var index = index + 1;  
      startOpacity = .2 + index/10;
      counter = .05;
  $(this).css({'background-color': 'rgba(255,255,255,'+startOpacity+')'});
  $(this).append(" " + index);

});
4

1 に答える 1

1

モジュラス演算子の助けを借りてリサイクルできます。

menuItems.each(function (index, value) {
    var index = index + 1, 
        startOpacity,
        counter, $this = $(this);

    startOpacity = .2 + (index % 5) / 10; //Here, you can give probably half the number of your menu items instead of 5
    counter = .05;

    $this.css({
        'background-color': 'rgba(255,255,255,' + startOpacity + ')'
    }).append(" " + index);

});

コードペン

于 2013-10-11T18:01:27.797 に答える