Jquery .animate()

[cpuser]

Hola amigos, he llegado otra vez a consultar, supongo que será algo muy simple pero no lo puedo sacar, o no veo a donde tengo el error , el codigo es el siguiente:

Código:

var navDuration = 700; 
var navJumpHeight = "1em";

		$('#institucional').click(function() {
		$('#institucional').animate({ top : "-"+navJumpHeight }, navDuration);   
		$('#productos').animate({ top : "0px" }, navDuration);
		$('#contacto').animate({ top : "0px" }, navDuration);            
		}, function() {
		$('#institucional').animate({ top : "30px" }, navDuration);
		});
  
		$('#productos').click(function() {
		$('#productos').animate({ top : "-"+navJumpHeight }, navDuration);   
		$('#institucional').animate({ top : "0px" }, navDuration);
		$('#contacto').animate({ top : "0px" }, navDuration);            
		}, function() {
		$('#productos').animate({ top : "30px" }, navDuration);
		});
		
		$('#contacto').click(function() {
		$('#contacto').animate({ top : "-"+navJumpHeight }, navDuration);   
		$('#institucional').animate({ top : "0px" }, navDuration);
		$('#productos').animate({ top : "0px" }, navDuration);            
		}, function() {
		$('#contacto').animate({ top : "30px" }, navDuration);
		});

Como veran es lo mismo repetido 3 veces, tengo un simple menu

Código:

<a id="institucional" href="#">Institucional</a>
<a id="productos" class="medio" href="#">Productos</a>
<a id="contacto" href="#">Contacto</a>

Entonces cada vez que aprieto en algun link, el texto sube 1em, me funciona perfecto para los id's institucional y productos, pero nose porque CONTACTO no :(, si aprieto contacto, baja el que esté seleccionado, pero este no sube 1em

Alguien tiene idea porque? ayudenme es desesperante!


muchas gracias