Efecto fade jquery
13 mar 2009 10 comentarios
Vamos a ver un ejemplo sencillo de jquery para hacer un rollover de efecto transparencia en nuestras fotos.
Creamos una nueva función, y aplicamos la función “fadeTo” al 0.3 en estado reposo (30% de opacidad) y al pasar el ratón por encima aplicamos a la foto el 1 (100% de opacidad).
$(document).ready(function () {
$(".fadefoto").fadeTo(1, 0.3);
$(".fadefoto").hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("normal", 0.3);
}
);
});
$(".fadefoto").fadeTo(1, 0.3);
$(".fadefoto").hover(
function () {
$(this).fadeTo("fast", 1);
},
function () {
$(this).fadeTo("normal", 0.3);
}
);
});
Y dentro del body de nuestra página, solo tenemos que aplicar el estilo que antes hemos creado para el efecto, en nuestro caso: “fadefoto” a la/s fotos que queremos aplicar el efecto de transparencia.
Mi nombre es Jorge, y soy de León. Desde hace algo más de 6 años trabajo de desarrollador web en las disciplinas de diseño, programación y SEO.
10 Comentarios
Daniel, el 28/04/2010 a las 17:35:21
oe man donde esta los scripts js y class=”fadefoto”
zeandesign, el 13/05/2010 a las 16:54:12
Genial, lo probe y me vino al 100%
Cesar Miguel Chavez, el 18/05/2010 a las 20:35:02
Genial lo probe con Joomla 1.5 en el Controller y funciono perfectamente, Gracias.
doWitty, el 22/05/2010 a las 18:38:35
Gracias, tio
Funciona genial y sin tener que agregar más ficheros js al proyecto.
Miguel Casallas, el 30/08/2010 a las 17:53:57
Excelente, me ha servido mucho
Saludos desde Colombia.
Edgar Pacosillo, el 07/01/2011 a las 17:49:44
Muy buen aporte gracias.. un saludo de antemano. Una duda
si quiero que tenga fadeduration
que sea mas lento como lo haria…???
liliana varela, el 03/03/2011 a las 18:52:13
Muy buen codigo!!! funciona perfecto en todos los exploradores….
Mil gracias por compartirlo
Carlos, el 01/04/2011 a las 02:35:28
Muy bueno!, el otro día hice un menú con slideUp & slideDown pero por alguna razón al pasar el mouse encima rápidamente como que enloquecía el efecto y se repite una y otra vez hasta terminar el numero de veces que se haya puesto el mouse encima, alguna idea de que puede ser?
Jorge Maiden, el 01/04/2011 a las 23:14:30
Hola Carlos, si utilizando stop() y animate() en lugar de “fade To”. Esta semana intentare crear un post explicándolo mejor, ya que lo veo interesante.
nilo, el 21/01/2012 a las 17:12:16
Esta todo bien .. pero .. y si quiero que sea una imagen y no una opacidad ?