JavaScript - pequeño ajuste en este codigo que funciona

Hola buenas, veran tengo un problema con el siguiente codigo que funciona.

El objetivo es hacer una pausa al poner el cursor encima de una imagen que cambia de manera aleatoria por otra cada x segundos.

Lo que ocurre es que cuando me pongo encima de la imagen aleatoria con el cursor, cuando intenta sustituirse por otra imagen aleatoria, se queda el espacio en blanco, sin nada, y cuando quito el cursor del raton aparece ya otra imagen aleatoria.

Lo optimo seria que la imagen se mantenga indefinidamente con el cursor encima hasta que le quite el cursor y ya si se sustituya por otra imagen aleatoria.

Espero no haberles liado explicandome.

Pueden ayudarme? un saludo y gracias de antemano.


<div id="cont_foto_1" onmouseover='parar = 1' onmouseout='parar=0'></div>

<script>

$(document).ready(function() {
parar = 0;
animate();
setInterval("animador()",13000);
});

function animate() {
$('#cont_foto_1').fadeIn("slow").load('random_fotos_2/mini_random_fotos.php #random_foto_1a').delay(10000).fadeOut("slow");
}


function animador(){
alert(parar);
if (parar == 0){
animate();
}
}

</script>

Aqui pongo la solucion a la pregunta de este post,

lo que hay que hace es cambiar el orden en la linea donde pone facein y faceout

pues hay que ponerlo alreves, osea faceout y facein.

espero que a alguien le sirva como a mi , un saludo a todos