I'm currently experimenting with CSS3/jQuery animations for a fun project. I have 10 icons and a speedometer graphic that I am working with. When the page loads, the speedometer graphic is initially rotated to '-60deg'. As the mouse moves over the icons, the speedometer graphic moves to different hardcoded angles ranging from '-' to '+'.
Here is the HTML code:
<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>
And here is the JavaScript code:
$(function()
{
$(".icon").hover(function()
{
var ICON_NAME = $(this).attr("data-value");
switch(ICON_NAME)
{
case '1':
$("#speedometer").stop(true, true).animate({rotate: '-60deg'});
break;
// Cases 2 through 10 follow...
}
});
})();
I am facing two issues with this setup: Firstly, it doesn't seem to detect the first icon (only icons 2 through 10). Secondly, when I move the mouse over an icon for the first time after the page loads, the speedometer jumps to '0deg' before animating to its current position. How can I address these problems? The jump to 0deg prior to animating is my primary concern.
** PLEASE NOTE ** The initial position of the speedometer is set to '-60deg' using CSS3 transforms.
LINK TO LIVE EXAMPLE: Speedometer Example