使图像映射翻转行为正确

Question

我正在使用几个图像映射来创建一些三角形按钮，但是在使用悬停效果（内联jquery，不理想但无法找到替代方法）时遇到一些困难才能正常运行。

<div id="triangle">
    <img src="triangle.png" alt="..." usemap="#imgmap"/>
    <map name="imgmap" id="imgmap">
        <area shape="poly" coords="0,100,50,0,100,100" href="#" target="_self" onmouseover="$('#prevslide').css('opacity','1');" onmouseout="$('#prevslide').fadeTo(600,0);" />
    </map>
</div>​

有关示例，请参阅this jsfiddle。这些状态会在小心使用时触发，但是当您快速连续几次悬停时它会开始失败。

我该如何防止这种情况？

Answer 1

在动画中应用.stop() - DEMO

<map name="imgmap" id="imgmap">
    <area shape="poly" coords="0,100,50,0,100,100" href="#" target="_self" 
          onmouseover="$('#prevslide').stop().css('opacity','1');"    
          onmouseout="$('#prevslide').stop().fadeTo(600,0);" />
</map>