Jquery -在imagemap上平滑/褪色图像源交换

Question

我使用以下代码:

jquery:

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"));
  });
});

在此HTML:

<nav>
<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">
<map name="Map" class="mainnav">
  <area class="one" shape="rect" coords="55,26,269,69" href="#statement" data-menu-src="images/menu/menu_01.gif">
  <area class="two" shape="rect" coords="234,112,361,159" href="#skills" data-menu-src="images/menu/menu_02.gif">
  <area class="three" shape="rect" coords="129,213,339,256" href="#education" data-menu-src="images/menu/menu_03.gif">
  <area class="four" shape="rect" coords="122,332,370,378" href="#experience" data-menu-src="images/menu/menu_04.gif">
  <area class="five" shape="rect" coords="203,444,391,495" href="#portfolio" data-menu-src="images/menu/menu_05.gif">
  <area class="six" shape="rect" coords="163,550,323,592" href="#contact" data-menu-src="images/menu/menu_06.gif">
  <area class="seven" shape="rect" coords="4,688,436,833" href="#home" data-menu-src="images/menu/menu_07.gif">
</map>
</nav>

的想法是，悬停在imagemap区域切换图像的来源。这部分很好。我想知道的是，我怎么能使这个过渡更平滑或淡入淡出在mouseenter/mouseleave，而不是立即发生，即在新源淡入，同时淡出旧的?这可能吗?我遇到的所有图像淡出都需要将图像堆叠在一起，然后设置不透明度，我希望避免这种情况，因为图像太多了。是否有其他解决方案，最好是利用我已经拥有的代码?如果不是，最聪明(或更聪明)的实现方式是什么?

Answer 1

试试这个-

$("map.mainnav area")
  .on("mouseenter", function(){
     $("#menu_img").hide().attr("src", $(this).data("menu-src")).stop().fadeIn(200);
  })
  .on("mouseleave", function(){
     $("#menu_img").hide().attr("src", $("#menu_img").data("menu-src")).stop().fadeIn(200);
  });
});

Answer 2

发现这个插件已经解决了我所有的问题与我的图像映射:

http://www.outsharked.com/imagemapster/default.aspx?what.html