jQuery(function($) {

function ActionName1(event)
{
    $("#ball").stop().animate({ "left": ($("#li1").position().left + ($("#li1").width() / 2 )) }, 200, "linear", null);
}
function ActionName2(event) {
    $("#ball").stop().animate({ "left": ($("#li2").position().left  + ($("#li2").width() / 2)) }, 200, "linear", null);
}

function ActionName3(event) {
    $("#ball").stop().animate({ "left": ($("#li3").position().left  + ($("#li3").width() / 2)) }, 200, "linear", null);
}
function ActionName4(event) {
    $("#ball").stop().animate({ "left": ($("#li4").position().left + ($("#li4").width() / 2)) }, 200, "linear", null);
}
$('#li1').bind('mouseover', ActionName1);
$('#li2').bind('mouseover', ActionName2);
$('#li3').bind('mouseover', ActionName3);
$('#li4').bind('mouseover', ActionName4);

$("#ball").css("left", $("#li1").position().left + ($("#li1").width() / 2));
});