jqueryと半径の境界を持つdivの円領域上でのみホバーリングトリガーをアニメーションにする方法

Question

私はプログラマーではなく、状況を解決するために最善を尽くしていますが、数時間と頭痛の後で私はあきらめます私は助けを求めています。

円形のロゴ（円になるには十分な半径のpxとその中のテキスト）があり、その上にマウスを置くとロゴの後ろから出てくるアニメーションがあります。

アニメーションは、ロゴを保持する円形のロゴとdivの間の「空の領域」（これはまだ正方形です）でトリガーされていることに気付きました。 現時点では私のスクリプトは、それがこれです：私は私を助ける何かを見つけるために、ウェブ上で、スタックオーバーフローで探してみました、と私はそれがこれです見つけ最寄りの事

$("#logo").hover(function(event){  // Hovering 
    myHover = "transition"; 
    $("#black").stop().animate({"top":"-200px"}, speed/2, function(){ 
     myHover = 1; 
    }); 
},function(event){  // Finish hovering 
    myHover = "transition"; 
    $("#black").stop().animate({"top":"0px"}, speed/2, function(){ 
     myHover = 0; 
    }); 
}); 

：

http://jsbin.com/oqewo - この他の質問からAccurately detect mouseover event for a div with rounded corners

私はそれを実装しようとしましたが、アニメーションとして十分に滑らかではないことが出ていました（私はロゴの上でマウスで前後に動こうとするとデバッグしようとしましたスクリプトの反応）：

$(".myCircle").hover(
    // when the mouse enters the box do... 
    function(){ 
     var $box = $(this), 
     offset = $box.offset(), 
     radius = $box.width()/2, 
     circle = new SimpleCircle(offset.left + radius, offset.top + radius, radius); 

     $box.mousemove(function(e){ 
      if(circle.includesXY(e.pageX, e.pageY) && myHover != "transition"){ 
       $(this).css({"cursor":"pointer"}); 
       myHover = "transition"; 
       $("#black").stop().animate({"top":"-200px"}, speed/2, function(){ 
        myHover = 1; 
       }); 
      }else if(!circle.includesXY(e.pageX, e.pageY)){ 
       $(this).css({"cursor":"default"}); 
       myHover = "transition"; 
       $("#black").animate({"top":"0px"}, speed/2, function(){ 
        myHover = 0; 
       }); 
      } 
     }); 

    }, 
    // when the mouse leaves the box do... 
    function() {  
     //alert("in") 
     //$(this).includesXY(e.pageX, e.pageY) 
     myHover = "transition"; 
     $(this).css({"cursor":"default"}); 
     $("#black").stop().animate({"top":"0px"}, speed/2, function(){ 
      myHover = 0; 
     }); 
    } 
) 

変数myHover = 0を挿入しました。アニメーションが完了したときにそれを知らせる変数が必要だったので、私の機能の開始時に、それはロゴの後ろに隠れていました。

そして、私は十分なCPUを吸っていないので、いつでも.unbindプロパティを使うのは分かりません。 mouseenterイベントより優れたものはありますか？それは、アニメーション中にロゴ上にマウスを置いたときではなく、ロゴ上でマウスを動かすときだけ、さまざまな時間を引き起こします。とにかくこの問題に近づくどんな種類の提案や改訂も歓迎されています。

=====================

私は方法を見つけるかもしれない

UPDATE

、誰かが私のコードを確認することができ、動作しているようですが、私はきれいに/それを最適化することが可能であるかどうかわからないですか、私は適切にアンバインド使っていますか？このコード内で使用

$(".myCircle").hover(
     // when the mouse enters the box do... 
     function(){ 
      var $box = $(this), 
      offset = $box.offset(), 
      radius = $box.width()/2, 
      circle = new SimpleCircle(offset.left + radius, offset.top + radius, radius); 

      $box.mousemove(function(e){ 
      if(circle.includesXY(e.pageX, e.pageY) && myHover != "transition1"){ 
       $(this).css({"cursor":"pointer"}); 
       myHover = "transition1"; 
       $("#black").stop().animate({"top":"-200px"}, speed/2, function(){ 
        myHover = 1; 
       }); 
      } 

      else if(!circle.includesXY(e.pageX, e.pageY)){ 
       $(this).css({"cursor":"default"}); 
       if(myHover == 1 || myHover == "transition1"){ 
        myHover = "transition0"; 
        $("#black").stop().animate({"top":"0px"}, speed/2, function(){ 
         myHover = 0; 
        }); 
       } 
      } 
     }); 

    }, 
    // when the mouse leaves the box do... 
    function() {  
     if(myHover == 1 || myHover == "transition1"){ 
      myHover = "transition0"; 
      $(this).css({"cursor":"default"}); 
      $("#black").stop().animate({"top":"0px"}, speed/2, function(){ 
       myHover = 0; 
      }) 
     }; 
     $("#container").unbind('mousemove'); 
    } 
) 

SimpleCircleクラスは、上記のデモから、次のように定義されますあなたの更新に関しては

function SimpleCircle(x, y, r) { 
    this.centerX = x; 
    this.centerY = y; 
    this.radius = r; 
} 

SimpleCircle.prototype = { 
    distanceTo: function(pageX, pageY) { 
    return Math.sqrt(Math.pow(pageX - this.centerX, 2) + Math.pow(pageY - this.centerY, 2)); 
    }, 
    includesXY: function(x, y) { 
    return this.distanceTo(x, y) <= this.radius; 
    } 
}; 

Answer 1

、それはすべてがよさそうです。

if()の2つのパラメータの順序を逆にして、myHover != "transition1"が最初になるようにパフォーマンスを少し向上させることがあります。 &&が短絡しているので、myHover != "transition1"がfalseの場合は、高価な円の包含チェックを呼び出す必要はありません。

また、else if()には、カーソルがすでに呼び出されていることを止めるためにカーソルを設定していることを示す何らかの変数を設定する価値があります。

SimpleCircleクラスを見ると、2つのパワーコールと平方根（Math.pow() x 2 + Math.sqrt()）だけが高価な操作をします。それをもっと速くしようとする価値があるかどうかは議論の余地がありますが、4つのクイック比較である円内の四角形内に座標があるかどうかをチェックすることしか考えられない最適化のみが考えられます。これは内部ポイントの50％明らかにポイントの残りの50％を減速させる。それが問題を改善したかどうかを確認するには、テストする必要があります。