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

Question

我不是程序员，我正在尽力解决问题，但是经过几个小时的头痛之后，我放弃了，我正在寻求帮助。

我有一个圆形徽标（半径px足够大的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-来自另一个问题准确检测具有圆角的div的鼠标悬停事件

我尝试实现它，但确实出现了动画效果不够平滑的东西（我尝试调试，以使鼠标在徽标上来回移动以查看脚本的反应）：

$(".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事件更好的了吗？ 它会触发各种时间，只有在将鼠标移到徽标上时才会触发，而不会在动画过程中将鼠标移到徽标上时触发。 无论如何，关于此问题的任何建议或修订都值得欢迎:)

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

更新

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

$(".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"为false，则不需要调用昂贵的圆包含检查。

同样在else if()上， else if()可能值得将一些变量设置为某些值，则表示您已经设置了光标以停止连续调用该变量。

看一下SimpleCircle类，它进行的唯一昂贵的操作是两个幂调用和一个平方根（ Math.pow() x 2 + Math.sqrt() ）。 是否值得尝试使速度更快是值得商，的，只有我能想到的最优化是检查坐标是否在圆的正方形内，这是四个快速比较，覆盖了50％的内部点，但显然会减慢其他50％的点数。 要查看它是否有所改善，您必须对其进行测试。