On the attached fiddle is what I hope will the be future UI for navigation on my own personal portfolio site. I was hoping you guys could critique the JavaScript I wrote to accomplish the most compatibility with the most browsers. I've tested as far back as IE 7 with this code and it works. Whereas the CSS solution is only IE 10+, and the jQuery Animate method is only usable in Chrome.
Below is the attached fiddle and all of the script I use to facilitate this process. Please be as brutal as possible. I am very new to JS and would like to know as much as possible!
http://jsfiddle.net/PhilFromHeck/um8Pp/
var key = "off";
var menuKey=["off","off","off","off"];
var menuID = [];
var menuState=[0,0,0,0];
$(document).ready(function () {
init();
$('.menu').mouseenter(function () {
for (var i = 0; i < 4; i++) {
if(menuID[i] == this){
menuKey=["off","off","off","off"];
menuKey[i] = "on";
}
}
if(key=="off"){
key="on";
doMove();
}
});
$('.menu').mouseleave(function () {
menuKey=["off","off","off","off"];
});
});
function init() {
menuID[0] = document.getElementById('menuOne');
menuID[1] = document.getElementById('menuTwo');
menuID[2] = document.getElementById('menuThree');
menuID[3] = document.getElementById('menuFour');
}
function doMove() {
var check = "no";
if(key == "on"){
for (var i = 0; i < 4; i++) {
if(menuKey[i] == "on"){
check = "yes";
if(menuState[i] < 100){
menuState[i] = menuState[i]+2;
menuID[i].style.backgroundPosition="0px " + menuState[i] + "px";
}
}
if(menuKey[i] == "off"){
if(menuState[i] > 0){
check = "yes";
menuState[i] = menuState[i]-2;
menuID[i].style.backgroundPosition="0px " + menuState[i] + "px";
}
}
}
if(check=="yes"){
setTimeout(doMove,1); // call doMove in 20msec
}
else{
key = "off";
}
}
}