title: Jquery - Smooth/Fade Image Source Swap on imagemap?
body: <p>I am using the following code:</p>
  
  <p>-Jquery:</p>
  
  <pre><code>jQuery(function(){
  $("map.mainnav area")
    .on("mouseenter", function(){
       $("#menu_img").attr("src", $(this).data("menu-src"));
    })
    .on("mouseleave", function(){
       $("#menu_img").attr("src", $("#menu_img").data("menu-src"));
    });
  
  });
  </code></pre>
  
  <p>on this HTML:</p>
  
  <pre><code>&lt;nav&gt;
  &lt;img id="menu_img" src="images/menu/menu_00.gif" alt="Navigation Menu" width="450"   height="900" usemap="#Map" class="centerimg" data-menu-src="images/menu/menu_00.gif"&gt;
  &lt;map name="Map" class="mainnav"&gt;
    &lt;area class="one" shape="rect" coords="55,26,269,69" href="#statement" data-menu-src="images/menu/menu_01.gif"&gt;
    &lt;area class="two" shape="rect" coords="234,112,361,159" href="#skills" data-menu-src="images/menu/menu_02.gif"&gt;
    &lt;area class="three" shape="rect" coords="129,213,339,256" href="#education" data-menu-src="images/menu/menu_03.gif"&gt;
    &lt;area class="four" shape="rect" coords="122,332,370,378" href="#experience" data-menu-src="images/menu/menu_04.gif"&gt;
    &lt;area class="five" shape="rect" coords="203,444,391,495" href="#portfolio" data-menu-src="images/menu/menu_05.gif"&gt;
    &lt;area class="six" shape="rect" coords="163,550,323,592" href="#contact" data-menu-src="images/menu/menu_06.gif"&gt;
    &lt;area class="seven" shape="rect" coords="4,688,436,833" href="#home" data-menu-src="images/menu/menu_07.gif"&gt;
  &lt;/map&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The idea is that hovering over the imagemap area switches the source of the image. That part works just fine. What I am wondering is, how can I make this transition smoother or fade in and out on mouseenter/mouseleave, instead of happen instantly, i.e fade in the new source while fading out the old? Is that even possible? All of the image fades I have come across require stacking the images on top of each other, and then animating opacity, which I am looking to avoid as there are so many of the images. Is there another solution, preferably utilizing the code I already have? If not, what would be the smartest (or a smarter) way to implement this?</p>