Спидометр графической помощи w/jQuery и CSS3

Question

Я работаю над проектом для shits and higgles, чтобы изучить анимацию 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.), как только я переместил указатель мыши на значок в первый раз после загрузки страницы, он отскакивает в положение «0дег», а затем в текущую позицию. Как я могу исправить эти две проблемы? Переход к 0deg перед оживлением этой текущей позиции - мой самый большой вопрос.

** ПРИМЕЧАНИЕ ** Исходное положение спидометра установлено на «-60deg» с помощью преобразований CSS3.

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>