带jQuery和CSS3的车速表图形帮助

我正在做一个关于屎和傻笑的项目来学习CSS3/jQuery动画。我有10个图标和一个速度表图形。在加载页面上，速度表图形旋转至“-60度”，当鼠标移动时，速度表图形移动至硬编码的“-”至“+”角度

HTML:

这很酷-但我有两个问题：1.）它似乎没有检测到第一个图标（只有2到10个）和2。）一旦我在页面加载后第一次将鼠标移到图标上，它会反弹到“0度”位置，然后反弹到当前位置。如何解决这两个问题？在设置动画到当前位置之前跳到0度是我最大的问题

**注** 速度表的初始位置通过CSS3转换设置为“-60度”

链接到LIVE示例：

---

干得好！您只需填写

数据

属性，就可以使这样的简单交互更加清晰

<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>

...

$（函数（）{
$（“.icon”）.hover（函数（）{
var degs=$（此）.attr（“数据值”）；
$（“#车速表”）。停止（真，真）。设置动画（{rotate:degs}）；
});
});

干得好！您只需填写

数据

属性，就可以使这样的简单交互更加清晰

<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>

...

$（函数（）{
$（“.icon”）.hover（函数（）{
var degs=$（此）.attr（“数据值”）；
$（“#车速表”）。停止（真，真）。设置动画（{rotate:degs}）；
});
});

位置

1

和

2

似乎都被设置为

-60deg

，第一种情况下你有一个拼写错误，rotate拼写错误。由于这个问题的性质，发布相关CSS可能会有所帮助。嗨，我提供了一个指向我的代码的链接。它现在似乎运行正常，但我认为它可以改进。位置

1

和

2

似乎都设置为

-60deg

，第一种情况下您有一个拼写错误，rotate拼写错误。由于这个问题的性质，发布相关CSS可能会有所帮助。您好，我提供了一个指向我的代码的链接。它现在似乎运行正常，但我认为它可以改进。

<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>