Hola a tod@s,
Estoy probando con un efecto sobre una imagen, es muy simple, la imagen está en blanco y negro y cuando se pasa el cursor sobre ella se cambia a color. En realidad lo que tengo es un div superpuesto en otro, el de más arriba es la imagen en color con opacidad al 0% y cuando detecta el cursor la opacidad cambia al 100%.
El problema es que cuando se accede a la página o se refresca se activa el efecto y desactiva y si paso el cursor sobre la imagen 3 veces, 3 veces se ejecuta el efecto, ¿podría pararse cuando quito el cursor de encima?
Dejo aquí el código html, css y javascript
Código CSS:
Ver original.imgbn {
width:289px;
height:142px;
background:transparent url('images/bn.jpg') no-repeat;
}
.imgcolor {
width:289px;
height:142px;
background:transparent url('images/color.png') no-repeat;
}
Código Javascript
:
Ver original$(document).ready(function()
{
$(".imgcolor").fadeTo("slow", 0);
$(".imgcolor").hover(function(){
$(this).fadeTo("slow", 1);
},
function()
{
$(this).fadeTo("slow", 0);
});
});
Gracias de antemano
EDITO: Lo de que el efecto pare si se aparta el cursor lo tengo controlado, con la función stop(), sólo me queda que el efecto no cargue al principio
EDITO2: Ya lo he solucionado :D gracias de todas formas