title: stop() function stops other controling parameters
body: <p>I have a complex imagemap with several mapped areas. On mouseover or click I want to overlay these imagemap with other images which do have exactly the same size and shall be in exactly the same position. So far, so good. </p>
  
  <p>Doing this, I added a <code>.fadeIn()</code> and <code>.fadeOut()</code> on my mouseover or on click. Common problem - loads of solutions online. The <code>fadeIn()</code> flickers/blinks. I found this solution here <a href="https://stackoverflow.com/questions/5967313/jquery-fade-flickers">jQuery fade flickers</a> . So I added the <code>.stop()</code> (I did not understand the <code>animate()</code> solution <a href="https://stackoverflow.com/questions/7172498/jquery-fadein-fadeout-flicker-on-rollover">Jquery - fadeIn/fadeOut flicker on rollover</a> or <a href="https://stackoverflow.com/questions/10890776/how-to-stop-fadein-blinking">How to stop fadeIn() blinking?</a>, or better, did not know how to implement it).</p>
  
  <p>But now, I cannot control the time of my <code>.fadeIn()</code> and <code>.fadeOut()</code> anymore. Moreover, only the <code>.mouseenter()</code> works, but not the <code>.click()</code>. Apart from that, everything works fine. The image overlays, the faded in images are in the right spot... Its just that fade which wont work.</p>
  
  <p>Below an exerpt of my code.</p>
  
  <pre><code>&lt;head&gt;
  &lt;script&gt;
  
  //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");
          });    
      });  
  });
  
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!-- INSERT THE PICTURE --&gt;
  &lt;div id="juego_bosque"&gt;
  &lt;img name="bosque" id="bosque1" src="imagenes_png/bosque_mapa.png" width="698" height="360" border="0" usemap="#bosque_m" alt="Bosque con animales" style="position:absolute" /&gt;
  
  &lt;!-- CREATE THE MAP --&gt;
  &lt;map name="bosque_m" id="bosque_m"&gt;
  &lt;area id="verdeA" shape="poly" coords="643,324,646,322,648,321,651,320,654,320,656,321,658,323,659,324,660,327,659,330,657,332,655,334,654,335,654,332,653,329,653,327,650,326,648,328,648,331,649,332,650,334,652,335,654,337,656,338,658,339,660,341,662,342,662,345,661,348,660,350,657,351,656,351,656,346,656,345,653,347,651,350,650,351,651,353,651,354,653,356,656,356,658,356,660,356,662,356,666,354,668,351,669,349,670,347,669,346,665,346,666,342,667,341,668,340,670,339,672,339,674,341,676,344,676,347,675,351,672,355,670,357,669,360,642,360,644,356,646,353,647,350,648,346,650,340,650,337,646,332,645,330,644,327,643,324" 
  alt="" /&gt;
      &lt;area shape="poly" coords="472,249,476,249,479,250,483,251,484,255,485,258,487,261,489,263,493,265,498,266,501,268,504,270,504,271,499,270,495,269,489,268,486,269,484,270,480,269,476,268,473,266,470,262,469,260,468,256,470,253,472,249" 
  id="azulA" alt="" /&gt;
  
  &lt;!-- HIDDEN PRELOADED IMAGES --&gt; 
  &lt;div id="azul" style="display:none; position:absolute"&gt;&lt;/div&gt;
  &lt;div id="verde" style="display:none; position:relative"&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here a Fiddle <a href="http://jsfiddle.net/6fq6ymx2/" rel="nofollow noreferrer">http://jsfiddle.net/6fq6ymx2/</a>
  On the Fiddle ony the two very right highlighted graphics have an effect added. </p>