속도계 그래픽 도움말/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; 
     } 
    }); 
})(); 

그래서 모든 멋진 -하지만이 두 가지 문제가있다 : 1)을 통해 첫 번째 아이콘 (단지 2를 감지하지 않는 것 10) 및 2.) 일단 페이지로드 후 아이콘 위로 마우스를 이동하면 '0deg'위치로 돌아오고 현재 위치로 이동합니다. 이 두 가지 문제를 어떻게 해결할 수 있습니까? 이 현재 위치로 애니메이션을 적용하기 전에 0 점으로 점프하는 것이 가장 큰 문제입니다.

** ** 속도계의 초기 위치는 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>