Спидометр графическая справка с jQuery и CSS3

Question

Я работаю над проектом дерьма и хихиканья по изучению анимации CSS3 / jQuery. У меня 10 значков и графика спидометра. На странице загрузки изображение спидометра поворачивается на «-60 градусов», а когда мышь перемещается, изображение спидометра перемещается в жестко заданный угол «-» через «+».

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 градусов перед анимацией на текущую позицию.

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

ССЫЛКА НА ПРИМЕР ЖИЗНИ: Пример спидометра

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>