$distance = 10;
$speed = 150;

$("#navi1").mouseover(function() {
  $("#navi1").animate({"left": "-=" + $distance + "px"}, $speed);
});
$("#navi1").mouseout(function() {
  $("#navi1").animate({"left": "+=" + $distance + "px"}, $speed);
});

$("#navi2").mouseover(function() {
  $("#navi2").animate({"left": "-=" + $distance + "px"}, $speed);
});
$("#navi2").mouseout(function() {
  $("#navi2").animate({"left": "+=" + $distance + "px"}, $speed);
});

$("#navi3").mouseover(function() {
  $("#navi3").animate({"left": "-=" + $distance + "px"}, $speed);
});
$("#navi3").mouseout(function() {
  $("#navi3").animate({"left": "+=" + $distance + "px"}, $speed);
});

$("#navi4").mouseover(function() {
  $("#navi4").animate({"left": "-=" + $distance + "px"}, $speed);
});
$("#navi4").mouseout(function() {
  $("#navi4").animate({"left": "+=" + $distance + "px"}, $speed);
});

$("#navi5").mouseover(function() {
  $("#navi5").animate({"left": "-=" + $distance + "px"}, $speed);
});
$("#navi5").mouseout(function() {
  $("#navi5").animate({"left": "+=" + $distance + "px"}, $speed);
});

$("#navi6").mouseover(function() {
  $("#navi6").animate({"left": "-=" + $distance + "px"}, $speed);
});
$("#navi6").mouseout(function() {
  $("#navi6").animate({"left": "+=" + $distance + "px"}, $speed);
});