Raphael JS - マウスオーバー中にアニメーションを開始/継続します。マウスオーバー時にアニメーションを一時停止する

Question

Raphael JSを使用すると、マウスオーバー中に円を右（または任意の方向）に移動し、カーソルがサークル上になくなったときに移動を一時停止/停止する方法があります。

私はいくつかの方法を試みましたが、バグがあります。主な問題の1つは、円に入った後にマウスカーソルが動かない場合、マウスカーソルがもはや円の上にならない位置に円が移動すると、「mouseout」がトリガーされないことです。

あなたは、私は、これらの異なる試みに何を意味するかわかります

1）一時停止/再開とアニメーション：

jsfiddle.net/fKKNt/

• しかし、アニメーションがぎくしゃくし、信頼できない。オブジェクト上にマウスカーソルを置くと、オブジェクトがマウスカーソルの外側に移動するため、オブジェクトは「マウスアウト」リスナーをトリガーしません。

2）マウスオーバー& .ATTR（ "CX"）との再配置：

jsfiddle.net/c4BFt/

• しかし、我々は、カーソルが円の中にある間、継続してアニメーションをしたいですあまりにも。

3）のsetInterval（に示唆されるように使用する： An "if mouseover" or a "do while mouseover" in JavaScript/jQuery）：

jsfiddle.net/9bBcm/

• をしかし、 "マウスアウト" は場所の外円移動と呼ばれていませんカーソルがある。私。円は「mouseout」が呼び出されるべき場所に移動しますが、呼び出されません。 同じことが「ホバー」で発生します：

jsfiddle.net/STruB/

Answer 1

私はこれを行うにははるかにエレガントな方法があります確信しているが、私の頭の上から、あなたは可能性http://jsfiddle.net/D6Ps4/2/

何らかの理由で消える場合は、次のコードを追加しました。このソリューションはアニメーションを開始するだけで、一定の間隔でマウスカーソル（e.offsetX/e.offsetYに注意してください）がRaphaelオブジェクトの境界ボックス（Element.getBBox()）内にあるかどうかを確認します。そうであれば、何もせずにsetTimeoutを使用して、しばらくしてから再度確認してください。そうでない場合は、アニメーションを一時停止してください。おそらく理想的ではないと、（また円が右に動いていると仮定し、それはboundBox、ないサークル自体のチェックです）、合理的にスムーズに動作しているようですし、うまくいけば取得

var paper = Raphael("holder"); 
    var animObject = Raphael.animation({cx: 400}, 5000); 
    circle = paper.circle(90, 90, 45).attr({fill: "#0E4"}); 
    var timer; 

    circle.mouseover(function(e) { 
     var anim = function(shouldAnim) { 
      if (shouldAnim) { 
       circle.animate(animObject); 
      } 
      if (!mouseInsideCircle(e, circle)) { 
       circle.pause(); 
       return;    
      } else { 
       timer = setTimeout(function() {anim(false)}, 20); 
      } 
     } 
     anim(true); 
    }); 

    circle.mouseout(function() { 
     this.pause(); 
     clearTimeout(timer); 
    }); 

    var mouseInsideCircle = function(e, c) { 
     var bb = c.getBBox(); 
     if (e.offsetX > bb.x && e.offsetY > bb.y) { 
      return true; 
     } 
     return false; 
    } 

は、私は解決策が欠陥があると確信していますあなたは正しい道にいます。