Trabaja con el método
hover que realiza lo mismo que los eventos
onmouseover y
onmouseout.
Código Javascript
:
Ver original$(".mask img").hover(function(){
var $img = $(this);
$img.fadeOut(800, function(){
$(this).prop("src", "imagen1.jpg");
}).fadeIn(800);
}, function(){
var $img = $(this);
$img.fadeOut(800, function(){
$(this).prop("src", "imagen2.jpg");
}).fadeIn(800);
});
Cuando se pose el puntero del mouse sobre la imagen, se ejecutará el método
fadeOut que ocultará la imagen. Al término de esta acción, se cambiará la imagen por una nueva y finalmente, se vuelve a mostrar la imagen con el método
fadeIn, pero con la nueva imagen de fondo. Cuando se retire el puntero del mouse de la imagen, se producirá lo mismo que al comienzo, con la diferencia que se intercambiará de imágenes, la antigua se restablecerá y la nueva se retirará. La transición dura 800 milésimas de segundo, pero puedes cambiar dicho valor.
Aquí puedes ver el ejemplo en acción.
Saludos