changement de couleur de fond transition avec jquery

Question

C'est ce que je essaie de réaliser:

L'utilisateur aura la possibilité d'ajouter plus d'années (un nouveau cercle avec le texte et la couleur suivante dans la pente). Donc, ce que je fais est de construire un div qui, en se répétant, peut construire l'image ci-dessus.

C'est le balisage:

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

C'est le 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; 
    } 

Voici ce que je reçois:

et si je le répète, le timeline_box il commencer à bien construire:

Le client peut changer maintenant l'année, mais le problème est que la couleur de fond du cercle restera toujours le même, je veux trouver un moyen de le changer avec jquery que chaque nouvelle année fond du cercle get's la couleur suivante sur le gradient ou quelque chose comme ça.

Des idées?

Answer 1

N'a jamais essayé quelque chose de ce genre - changer les couleurs tout en suivant le gradient de couleur ou quoi que ce soit. Je pensais que ce serait plus compliqué que ça. Le format de couleur hsl le rend assez facile à faire. Pour "suivre le gradient" il suffit de continuer à incrémenter le h dans hsl - la logique est simple.

Voici le 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); 

Il n'y a même pas la nécessité de remettre le h à 0 à un certain quelque point. Le h peut continuer encore et encore, et il va continuer à faire du vélo le gradient.

Voici un jsbin: http://jsbin.com/oqifoq/1/edit