Evitar que el efecto salte al refrescar

[tempto]

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 HTML:

<div class="imgbn">
        <div class="imgcolor">
        </div>
    </div>
 

Código CSS:

.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:

$(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