スピードメーターのグラフィックヘルプ（jQueryとCSS3）

Question

私は、CSS3/jQueryアニメーションを学ぶために、たわごととクソのプロジェクトに取り組んでいます。私は10のアイコンとスピードメーターのグラフィックを持っています。ページの読み込みでは、スピードメーターのグラフィックが '-60deg'に回転し、スピードメーターのグラフィックがハードコーディングされた ' - 'から '+'の角度に移動します。

HTML：

<nav class="clearfix" id="nav"> 
     <ul> 
      <li><a class="icon first" data-value="1"></a></li> 
      <li><a class="icon second" data-value="2"></a></li> 
      <li><a class="icon third" data-value="3"></a></li> 
      <li><a class="icon forth" data-value="4"></a></li> 
      <li><a class="icon fifth" data-value="5"></a></li> 
      <li><a class="icon sixth" data-value="6"></a></li> 
      <li><a class="icon seventh" data-value="7"></a></li> 
      <li><a class="icon eight" data-value="8"></a></li> 
      <li><a class="icon nine" data-value="9"></a></li> 
      <li><a class="icon ten" data-value="10"></a></li> 
     </ul> 
    </nav> 
<div id="footer-container"> 
    <div id="speedometer"></div> 
</div> 

JAVASCRIPT：

$(function() 
{ 
    $(".icon").hover(function() 
    { 
     var ICON_NAME = $(this).attr("data-value"); 
     switch(ICON_NAME) 
     { 
      case '1': 
       $("#speedometer").stop(true, true).animate({roate: '-60deg'}); 
       break; 
      case '2': 
       $("#speedometer").stop(true, true).animate({rotate: '-60deg'}); 
       break; 
      case '3': 
       $("#speedometer").stop(true, true).animate({rotate: '-40deg'}); 
       break;    
      case '4': 
       $("#speedometer").stop(true, true).animate({rotate: '-30deg'}); 
       break;    
      case '5': 
       $("#speedometer").stop(true, true).animate({rotate: '-20deg'}); 
       break;    
      case '6': 
       $("#speedometer").stop(true, true).animate({rotate: '0deg'}); 
       break;  
      case '7': 
       $("#speedometer").stop(true, true).animate({rotate: '30deg'}); 
       break; 
      case '8': 
       $("#speedometer").stop(true, true).animate({rotate: '40deg'}); 
       break; 
      case '9': 
       $("#speedometer").stop(true, true).animate({rotate: '50deg'}); 
       break;                 
      case '10': 
       $("#speedometer").stop(true, true).animate({rotate: '60deg'}); 
       break; 
     } 
    }); 
})(); 

だから、すべてのクールだ - しかし、私は2つの問題を抱えている：1.）通って第1のアイコン（のみ2を検出していないようです10）と2.）ページを読み込んだ後、最初にアイコンの上にマウスを移動すると、 '0deg'の位置に、次に現在の位置に移動します。これら2つの問題を解決するにはどうすればよいですか？この現在の位置にアニメーション化する前に0degにジャンプすることが私の最大の質問です。

** NOTE ** スピードメーターの初期位置は、CSS3変換を介して '-60deg'に設定されています。例を生きて

LINK： Speedometer Example

Answer 1

ニースの仕事！ dataの属性を入力するだけで、このような簡単なやりとりを行うことができます。

<nav class="clearfix" id="nav"> 
    <ul> 
     <li><a class="icon first" data-value="-60deg"></a></li> 
     <li><a class="icon second" data-value="-40deg"></a></li> 
     ... 
    </ul> 
</nav> 

<script> 
$(function(){ 
    $(".icon").hover(function(){ 
    var degs = $(this).attr("data-value"); 
    $("#speedometer").stop(true, true).animate({rotate: degs}); 
    }); 
}); 
</script>