Need smoother animation...
Hi!
I created a navigation system with an arrow indication wich menu header is selected. im using jQuery to animate the top of the div containing the arrow image. making int look like its moving smooth.
Problem is that i have 1 .hover functions for each menu coice. so if i move the cursor fast across the coices and stop att coice nr4. the arrow will stop at each menu choice i hoovered before it stops att the one currently selected.
here is a demo:
http://oscarkarlsson.se/animation/
is there a way to skip all the previos animation "sessions", or maybe
-
$(function() {
$("#li_1").hover(
function() {
$("#arrow").animate({top:169})
});
});
$(function() {
$("#li_2").hover(
function() {
$("#arrow").animate({top:200})
});
});
$(function() {
$("#li_3").hover(
function() {
$("#arrow").animate({top:231})
});
});
$(function() {
$("#li_4").hover(
function() {
$("#arrow").animate({top:262})
});
});
$(function() {
$("#li_4").hover(
function() {
$("#arrow").animate({top:262})
});
});
$(function() {
$("#li_5").hover(
function() {
$("#arrow").animate({top:293})
});
});
$(function() {
$("#li_6").hover(
function() {
$("#arrow").animate({top:324})
});
});