javascript - jqueryによる背景色の変更遷移

Question

これは私が達成しようとしていることです：

ユーザーは、さらに年を追加するオプションがあります（テキストとグラデーションの次の色を含む新しい円）。

つまり、私が行っているのは、それ自体を繰り返すことで上記のイメージを構築できるdivを構築することです。

これはマークアップです：

     <a href="javascript:void(0)" class="timeline_box">
        <span class="timeline_dot"></span>
        <span class="timeline_year">2003</span>
    </a>

これはCSSです：

    a.timeline_box{
        background: url('../images/timeline_bg.png') no-repeat 15px -2px;
        display: block;
        width: 56px;
        height: 20px;
        float: left;
    }
    span.timeline_dot{
        display: block;
        height: 14px;
        width: 14px;
        background-color: #ff845a;
        -moz-border-radius: 5px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 5px;
        border-radius: 10px;
    }
    span.timeline_year{
        color: #b6b6b6;
        font-size: 10px;
        font-style: italic;
        font-family: Georgia, Times, "Times New Roman", serif;
        vertical-align: top;
    }

これは私が得るものです：

そして、timeline_boxを繰り返すと、うまく構築され始めます。

クライアントは年を変更できるようになりましたが、問題は円の背景色が常に同じままであるということです。新しい年ごとに円の背景が次の年になるように、jqueryで変更する方法を見つけたいと思います。グラデーションの色など。

何か案は？

Answer 1

この種の何かを試したことはありません-カラーグラデーションなどを追跡しながら色を変更します。それはそれよりも難しいだろうと思った。hslカラー形式を使用すると、非常に簡単に実行できます。「勾配に従う」には、hslのhをインクリメントし続ける必要があります。ロジックは単純です。

これがjavascriptです：

var $box = $('.timeline_box'),
    h_val = 0;

function addBox () {
  var $new_box = $box.clone();
  h_val += 17; //change this value to change the amount of color change

  $new_box
    .find('.timeline_dot')
    .css('background', 'hsl('+ h_val +', 100%, 68%)') //change the "s" and "l" values to your liking
    .end()
    .appendTo('body'); 
}

$('#el').on('whatever', addBox);

どこかでhを0にリセットする必要すらありません。hは継続して継続することができ、グラデーションを循環し続けるだけです。

これがjsbinです：http：//jsbin.com/oqifoq/1/edit