RaphaelJS：在悬停和移动元素时移除闪烁

Question

我在Raphael JS和SVG中都很新。目前我在地图功能上使用SVG和Raphael。

我有一个悬停效果的问题，它偏移给定的元素悬停与10px。但是，如果将鼠标缓慢移动到元素中，hoverIn和hoverOut会发生一堆导致闪烁的情况。

我想我可以通过克隆这些国家来解决这个问题，并且在悬停时让它隐藏起来并且保持静止。我可以这样做，我说，因为地图包含数百个形状...

什么是方法？我该怎么办？

Answer 1

如果我理解正确，则将鼠标悬停在它上面时会移动该元素，这会导致hoverOut事件。您想在慢速鼠标移动时发生什么？它移动一次，保持移动，直到鼠标进入内部？

您需要在元素上设置一个变量，以显示它被移动10px的时间。然后你可以做类似（伪代码）

hoverIn() { 
    if (isShifted) { 
     inWhenShifted = true 
    } else { 
     // offset element 
     isShifted = true 
    } 

hoverOut() { 
    if (isShifted) { 
     if (inWhenShifted) { 
      // put element back 
      isShifted = false 
      inWhenShifted = false 
     } else { 
      // do nothing?, this is the case where the hoverOut fired 
      // because we moved the element 
     } 
    } else { 
     // do nothing?, this is the case where we hoverOut again after shifting 
     // the element back 
    } 
}