我正在开发一个项目,用于学习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'位置然后到当前位置。我该如何解决这两个问题呢?在动画到当前位置之前跳转到0deg是我最大的问题。
**注意** 通过CSS3变换将车速表的初始位置设置为“-60deg”。
链接到现场示例: Speedometer Example
答案 0 :(得分: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>