带有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。)一旦我在页面加载后第一次将鼠标移动到图标上，它就会弹到‘0度’位置，然后弹到当前位置。我如何解决这两个问题？在动画到当前位置之前跳到0度是我最大的问题。

**注意**速度计的初始位置通过CSS3变换设置为‘-60度’。

链接到实时示例：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>