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!