انجام تغییرات به ترتیب

[Ghasem Paran 333]

سلام

معذرت برای عنوان تاپیک

یه صفحه داریم مثل عکس زیر :

کد html هم به این صورت هست :

<div class="skills">
		  <h3>Development Skills</h3>
		  <ul>
		    <li> <span class="skill-name">PHP</span>
			  <div class="rate right" data-rate="6"></div>
		    </li>
		    <li> <span class="skill-name">MySQL</span>
			  <div class="rate right" data-rate="6"></div>
		    </li>
		    <li> <span class="skill-name">Jquery</span>
			  <div class="rate right" data-rate="4"></div>
		    </li>
		    <li> <span class="skill-name">Dreamweaver</span>
			  <div class="rate right" data-rate="7"></div>
		    </li>
		    <li> <span class="skill-name">CSS3</span>
			  <div class="rate right" data-rate="7"></div>
		    </li>
		    <li> <span class="skill-name">HTML5</span>
			  <div class="rate right" data-rate="7"></div>
		    </li>
		    <li> <span class="skill-name">SEO</span>
			  <div class="rate right" data-rate="4"></div>
		    </li>
		    <li> <span class="skill-name">Wordpress</span>
			  <div class="rate right" data-rate="5"></div>
		    </li>
		    <li> <span class="skill-name">Javascript</span>
			  <div class="rate right" data-rate="3"></div>
		    </li>
		  </ul>
</div>

کد جی کوئری هم این هست :

$(".skills li .rate").each(function(index,e) {
  // Vars
  var
   $ratNum = 7,
   $rat = $(e).attr("data-rate"),
   $point = "<span></span>";
  // Append points
  while($ratNum > 0){
	   $(e).append($point);
	   $ratNum--;
  }
  $(e).find("span").each(function(index,e) {
   if(index >= $rat) return false;
   // Append Disabled Rats
   $(e).animate({
	   opacity: 1
	 });
  });
	 });

من میخوام به جای این که دایره ها یه دفعه پررنگ بشه ، تک تک پر رنگ بشن تا مقداری که بهش گفتم.

چیکار باید بکنم ؟

ممنون

[Ghasem Paran 333]

کسی نمیدونه ؟