獲取圖像映射翻轉表現正確

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>