如何使用jquery使悬停触发仅在具有半径边界的div中的圆形区域上的动画

我不是一个程序员，我正在尽我最大的努力解决这个问题，但在几个小时后，头痛我放弃了，我请求帮助

我有一个圆形徽标（一个半径足够大的div，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;
    });
});

我试着在web和stack overflow上查找一些对我有帮助的东西，最近发现的是：

$("#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;
    });
});

-从另一个问题

我试着实现它，但我确实发现了一些不够流畅的动画（我试着调试，试图用鼠标在徽标上来回移动，以查看脚本的反应）：

我插入了一个变量myHover=0；在我的函数开始时，因为我需要一个变量，该变量可以让我知道动画何时完成，它隐藏在徽标后面，或者在转换中

我不知道何时以及如何使用.unbind属性，所以我不会占用足够的cpu。 有什么比mouseenter事件更好的吗？它会在不同的时间触发，并且仅当我在徽标上移动鼠标时触发，而不是当我在动画期间将鼠标放在徽标上时触发。无论如何，任何关于这个问题的建议或修改都是非常受欢迎的：）

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

更新

我可能会找到一种方法，它似乎是有效的，但我不确定是否有可能优化/清理它，或者如果我正确使用unbind，是否有人可以检查我的代码

$(".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;
  }
};

函数SimpleCircle（x，y，r）{ 这个.centerX=x； 这个y=y； 这个半径=r； } SimpleCircle.prototype={ 距离：功能（pageX，pageY）{ 返回Math.sqrt（Math.pow（pageX-this.centerX，2）+Math.pow（pageY-this.centerY，2））； }, includeXY：函数（x，y）{

---

返回这个。距离到（x，y）关于你的更新，一切看起来都不错

您可以通过颠倒两个

if（）

参数的顺序来获得轻微的性能提升，从而使

myHover！=“transition1”

位于第一位。

&

短路，因此如果

myHover！=“transition1”

为false，则不需要调用昂贵的圆包含检查

另外，在

else if（）

上，将某个变量设置为表示您已经将光标设置为停止连续调用的某个值可能是值得的

查看

SimpleCircle

类，它唯一昂贵的操作是两个幂调用和一个平方根（

Math.pow（）x2+Math.sqrt（）

）。是否值得尝试更快的速度值得商榷，我能想到的唯一优化方法是检查坐标是否在圆圈内的正方形内，这是四个快速比较，这覆盖了50%的内部点，但明显减慢了其他50%的点。要看它是否改善了问题，您可以我必须测试它

---

关于您的更新，一切看起来都不错

您可以通过颠倒两个

if（）

参数的顺序来获得轻微的性能提升，从而使

myHover！=“transition1”

位于第一位。

&

短路，因此如果

myHover！=“transition1”

为false，则不需要调用昂贵的圆包含检查

另外，在

else if（）

上，将某个变量设置为表示您已经将光标设置为停止连续调用的某个值可能是值得的

查看

SimpleCircle

类，它唯一昂贵的操作是两个幂调用和一个平方根（

Math.pow（）x2+Math.sqrt（）

）。是否值得尝试更快的速度值得商榷，我能想到的唯一优化方法是检查坐标是否在圆圈内的正方形内，这是四个快速比较，这覆盖了50%的内部点，但明显减慢了其他50%的点。要看它是否改善了问题，您可以我必须测试它

---

Thx寻求答案！我在谷歌上寻找“SimpleCircle”+jquery，但我没有找到任何东西，我应该去哪里寻找？@Littlemad我已经在你阅读的示例中的问题中添加了

SimpleCircle

类；这样，对于那些看它的人来说，问题就更完整了。因此SimpleCircle类是“（Math.pow（）x2+Math.sqrt（））“我说得对吗？不……这是我对您正在使用的例程性能的分析。代码现在在您的问题中，我为您添加了它。

simplercle

类是一段代码，它提供了一个名为

includexy（x，y）的方法。”

它告诉你一个给定的点是否在圆内。为了确定这一点，它必须做一些非常基本的几何（毕达哥拉斯），它使用这些数学运算。平方根并不是执行的最佳运算，幂只用于平方，因此可以用乘法代替，但通过检查是否在“内平方”中，您可能会获得更好的性能在进行计算之前，先看圆的形状。请看图表。如果您需要数学方面的帮助，请大声呼喊。Thx是答案！我正在寻找“SimpleCircle”google上的+jquery但是我没有找到任何东西，我应该去哪里找？@Littlemad我已经在你阅读的例子中为你的问题添加了

SimpleCircle

类；这样对于那些看它的人来说问题就更完整了。所以SimpleCircle类是“（Math.pow（）x 2+Math.sqrt（））”我说的对吗？不……那是我的错