Jquery - 图像映射上的平滑/淡化图像源交换？答案

【问题标题】：Jquery - Smooth/Fade Image Source Swap on imagemap?Jquery - 图像映射上的平滑/淡化图像源交换？
【发布时间】：2013-06-20 20:19:58
【问题描述】：

我正在使用以下代码：

-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>

这个想法是，将鼠标悬停在图像地图区域上会切换图像的来源。那部分工作得很好。我想知道的是，我怎样才能使这种过渡更平滑或在 mouseenter/mouseleave 上淡入和淡出，而不是立即发生，即淡入新源而淡出旧源？这甚至可能吗？我遇到的所有图像褪色都需要将图像堆叠在一起，然后设置不透明度动画，因为图像太多，我希望避免这种情况。是否有另一种解决方案，最好利用我已有的代码？如果不是，那么实现这一点的最聪明（或更聪明）的方法是什么？

【问题讨论】：

标签： jquery image transition fade imagemap

【解决方案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);
  });

});

【讨论】：

好的，这个工作正常了，但它会导致两者之间出现难看的白色闪光。图像确实淡入淡出但不流畅，有什么办法可以淡出隐藏吗？
通过将 div 的背景图像设置为默认图像解决了白闪问题，但回到原始源的过渡不会褪色，它仍然只是“弹回”。有什么想法吗？
添加 fadeOut 似乎完全破坏了功能

【解决方案2】：

发现这个插件解决了我的图像映射的所有问题：

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

【讨论】：