jquery가있는 반지름 테두리가있는 div의 원 영역에서만 호버링 트리거를 만드는 방법

Question

저는 프로그래머가 아니므로 상황을 해결하기 위해 최선을 다하고 있지만 몇 시간 후에는 두통을 포기하고 나는 도움을 청한다.

원형 로고 (원과 그 안에 일부 텍스트가되도록 반경이 px 인 div)가 있습니다. 로고 위에 마우스를 가져 가면 로고 뒤에서 나오는 애니메이션이 있습니다.

원형 로고와 div를 유지하는 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; 애니메이션이 완료되면 알려주는 변수가 필요하기 때문에 함수가 시작될 때 로고 뒤에 숨겨져 있거나 전환 중에 있습니다.

그리고 나는 .unbind 속성을 사용할시기와 방법을 알지 못하기 때문에 충분한 CPU를 먹지 않을 것입니다. 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() 매개 변수의 순서를 반대로하면 성능이 약간 향상되어 myHover != "transition1"이 첫 번째로됩니다. &&은 단락되어 있으므로 myHover != "transition1"이 거짓이면 값 비싼 서클 포함 확인을 호출 할 필요가 없습니다.

또한 변수를 설정하여 커서가 계속 호출되는 것을 막을 수 있다고 설정하는 것이 좋습니다.

SimpleCircle 클래스를 보면 값 비싼 작업은 두 건의 전원 호출과 제곱근 (Math.pow() x 2 + Math.sqrt())입니다. 그것이 더 빠른 것을 얻으려고 노력하는 것이 가치가 있는지의 여부는 논란의 여지가 있습니다. 단지 좌표가 4 개의 빠른 비교 인 원 안에 정사각형 내에 있는지를 확인하는 것입니다. 이것은 내부 점의 50 %를 다루며, 분명히 다른 50 % 포인트를 떨어 뜨립니다. 문제가 개선되었는지 확인하려면 테스트해야합니다.