0

私は Raphael JS と SVG 全般にかなり慣れていません。現在、マップ機能で SVG と Raphael を使用しています。

ホバーした特定の要素を 10px でオフセットするホバー効果に問題があります。ただし、マウスを要素にゆっくりと移動すると、hoverIn と hoverOut が何度も発生し、ちらつきが発生します。

国を複製し、ホバリング時に非表示にして静止したままにすることで、これを解決できると思います。マップには何百もの図形が含まれているため、私はこれを行うことができました...

アプローチは何ですか？私は何をすべきか？

4

1 に答える 1

0

私が正しく理解している場合、要素にカーソルを合わせると要素が移動し、 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
    }
}
于 2013-09-08T11:03:44.183 に答える