función stop () detiene otros parámetros de control

Tengo un imagemp complejo con varias áreas mapeadas. Al pasar el mouse o hacer clic, quiero superponer este mapa de imágenes con otras imágenes que tienen exactamente el mismo tamaño y estarán exactamente en la misma posición. Hasta ahora tan bueno.

Al hacer esto, agregué un .fadeIn() y .fadeOut() en mi mouseover o al hacer clic. Problema común – un montón de soluciones en línea. El fadeIn() parpadea / parpadea. Encontré esta solución aquí jQuery fade parpadea . Así que agregué el .stop() (no entendí la solución animate() Jquery – fadeIn / fadeOut en el rollover o ¿Cómo dejar de parpadear fadeIn ()? O, mejor aún, no sabía cómo implementarlo).

Pero ahora, ya no puedo controlar el tiempo de mi .fadeIn() y .fadeOut() . Además, solo el .mouseenter() funciona, pero no el .click() . Aparte de eso, todo funciona bien. Las imágenes superpuestas, las imágenes descoloridas se encuentran en el lugar correcto … Es solo esa atenuación que no funciona.

A continuación un extracto de mi código.

   //PRELOAD THE IMAGES verde = new Image(698, 360) verde.src = "imagenes_png/verde_mouse.png"; azul = new Image(698, 360) azul.src = "imagenes_png/azul_mouse.png"; //there are more images preloaded //LOAD THE DOM BEFORE JS FILLS IT WITH IMG $(document).ready(function() { document.getElementById("verde").appendChild(verde); document.getElementById("azul").appendChild(azul); }); //jQUERY FADE $(document).ready(function() { $(function() { $("#verdeA").click(function() { $("#verde").stop().fadeIn("1000"); }); $("#verdeA").mouseleave(function() { $("#verde").stop().fadeOut("500"); }); $("#azulA").mouseenter(function() { $("#azul").stop().fadeIn("5000"); }); $("#azulA").mouseleave(function() { $("#azul").stop().fadeOut("500"); }); }); });     
Bosque con animales

Aquí, un Fiddle http://jsfiddle.net/6fq6ymx2/ En el Fiddle solo se agregan los dos gráficos resaltados a la derecha.