使图像映射翻转以正确运行

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>