Optimizar codigo jquery...

[ricardomz]

Amigos,

Soy nuevo en jQuery.... Estoy haciendo un pequeño efecto para un menu. En el over de los botones un banner cambia, es todo. Pero quiero optimizar mi codigo, es decir hacerlo mas pequeño pues es muy grande para lo que hace. Les muestro:

Código:

$("#inicio").mouseover(function() {
							$("#logo_image").fadeOut(0).css({"background-position":"0px -91px"}).fadeIn("slow");
						  }).mouseout(function(){
							$("#logo_image").fadeOut(0).css({"background-position":"0px 4px"}).fadeIn("slow");
						  });
						  
						  $("#contacto").mouseover(function() {
							$("#logo_image").fadeOut(0).css({"background-position":"0px -186px"}).fadeIn("slow");
						  }).mouseout(function(){
							$("#logo_image").fadeOut(0).css({"background-position":"0px 4px"}).fadeIn("slow");
						  });
						  
						  $("#nosotros").mouseover(function() {
							$("#logo_image").fadeOut(0).css({"background-position":"0px -281px"}).fadeIn("slow");
						  }).mouseout(function(){
							$("#logo_image").fadeOut(0).css({"background-position":"0px 4px"}).fadeIn("slow");
						  });
						  
						  $("#habilidades").mouseover(function() {
							$("#logo_image").fadeOut(0).css({"background-position":"0px -375px"}).fadeIn("slow");
						  }).mouseout(function(){
							$("#logo_image").fadeOut(0).css({"background-position":"0px 4px"}).fadeIn("slow");
						  });

Si observan el codigo es el mismo para cada sección; Inicio, Nosotros, Contacto, Habilidades, etc. etc. Todos modifican un div con un id "logo_image" y si acaso lo unico que cambia es el segundo valor que le paso en background position.. -4px, -375px, -281px, etc. etc... Por el momento no son consecutivos pero podrían tener algun factor en comun como incrementar de 95 en 95...

Debido a mi inexperiencia en jQuery no se cual sea la mejor forma de hacerlo mas pequeño. Me gustaría que en una sola función pudieramos meterlo todo.

Me pueden ayudar?.. Me urge tener esto terminado

Gracias de antemano por su amable apoyo!

Un saludo cordial!

[camilocalderont]

Iniciado por ricardomz

Amigos,

Soy nuevo en jQuery....

Código:

$("#inicio").mouseover(function() {
							$("#logo_image").fadeOut(0).css({"background-position":"0px -91px"}).fadeIn("slow");

}).mouseout(function(){
							$("#logo_image").fadeOut(0).css({"background-position":"0px 4px"}).fadeIn("slow");
						  });

Hola Amigo, Yo Tampoco es que sea un Experto pero si veo muchos errores:



lo primero para optimizar es en los eventos:

1. las funciones mouseover y mouseout se pueden remplazar por la funcion
[URL="http://api.jquery.com/hover/"]hover(over,out)[/URL] donde el primer parametro corresponde al mouseOver y el segundo parametro corresponde al mouseOut

2. las animaciones fadeIn y fadeOut se puede remplazar por [URL="http://api.jquery.com/fadeToggle/"]fadeToggle(in,out)[/URL]

donde el primer parametro lanza una funcion para el efecto fadeIn, y el segundo para el fadeOut

yo recomiendo en vez de escribir una funcion anonima, escribir un nombre normal y abajo escribir la funcion para mi es mas organizado

es decir en vez de escribir:

Código:

algo.mouseover(function() {
//lo que hace la funcion
});

me parece mejor escribir

Código:

algo.mouseover(nombre_funcion);

function nombre_funcion()
{
   //lo que hace la  funcion
}

de lo que pude "entender" del codigo tengo esta propuesta:

Código:

$(document).ready(function() {
	
	$("#inicio").hover(fover,fout)
	$("#contacto").hover(fover,fout)
	$("#nosotros").hover(fover,fout)
	$("#habilidades").hover(fover,fout)
	
	function fout()
	{
		$(this).fadeOut(0).css({"background-position":"0px 4px"}).fadeIn("slow")
		
	}
	
	function fover()
	{
		boton=$(this).attr("id")
		v=-91
		switch(boton)
		{
			case "inicio":
				$(this).fadeOut(0).css("background-position","0px "+v+"px")
			break;
			case "contacto":
				v=v-95
				$(this).fadeOut(0).css("background-position","0px "+v+"px")
			break;
			case "nosotros":
				v=v-190
				$(this).fadeOut(0).css("background-position","0px "+v+"px")
			break;
			case "habilidades":
				v=v-285
				$(this).fadeOut(0).css("background-position","0px "+v+"px")
			break;									
		}
	}
    
});

con esto se logra centrar todo en solo dos funciones una fover y la otra fout,

como para fout es lo mismo en todos los botones entonces no importa diferenciarlos y se utiliza simplemente $(this)

pero en cuanto a fover se tiene que saber cual boton lanzo el evento entonces se utiliza la funcion attr("id") para saber por medio de un switch cual boton fue, ahora la variable v=-91 es el vertical que va cambiando en el background-position.


Espero te sirva de Ayuda

[ricardomz]

Man.. esta era la clase de ayuda que necesistaba.. Millones de gracias Camilo!!

Un abrazo!