Saludos!
Quiero hacer un pequeño efecto con un cambio de imagen a través de javascript. En principio el siguiente código me funciona, pero me da algúnos problemas:
En firefox, no se cambia la imagen, ésta simplemente parpadea haciendo el efecto de fadeIn y fadeOut.
Y el problema más grande, es que la transición es muy lenta (en el resto de navegadores que funciona). Queda demasiado rato la zona sin ninguna imagen mostrada. He mirado la documentación, y en principio con un valor de "1", tendría que hacer un cambio rapidisimo. Es posible que esté afectando el .load?
Gracias de antemano!
Os pongo el código que estoy utilizando
Código:
function h_gourmet() {
$("#img_gourmet").fadeOut("1",function() {
$(this).attr("src", "img/gourmet_hover.jpg");
$(this).load(function() { $(this).fadeIn("1"); });
});
Código HTML:
<div id="carousel">
<ul>
<li class="mask">
<img alt="" src="img/gourmet.jpg" onmouseover="this.src='img/gourmet_hover.jpg'" onmouseout="this.src='img/gourmet.jpg'" width="275" height="185" />
</li>
</ul>