如何使悬停仅在带有jquery的半径边框的div中的圆形区域上触发动画 [英] How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery

问题描述

我不是程序员，我正在尽最大努力解决这种情况，但在几个小时和头痛之后我放弃了，我正在寻求帮助.

I am not a programmer, and I am trying my best to solve the situation but after several hours and headache I give up and I am asking for help.

我有一个圆形徽标(一个具有足够半径 px 的 div 以变成一个圆圈并在其中包含一些文本)，当我将鼠标悬停在徽标上时，我有一个动画从徽标后面出来.

I have a circular logo (a div with enough radius px to become a circle and some text in it), and I have an animation that come out from behind the logo when I hover on it.

我注意到我的动画在圆形徽标和保存徽标的 div 之间的空白区域"上触发(它仍然是一个正方形).目前我的脚本是这样的:

I noticed that my animation it triggers on the "empty area" between the circular logo and the div that hold the logo (that it is still a square). At the moment my script it is this:

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

我尝试在网络上查找堆栈溢出以找到对我有帮助的东西，而我找到的最接近的东西是这样的:

I tried looking on the web and on stack overflow to find something that will help me, and the nearest thing that I found it is this:

http://jsbin.com/oqewo - 来自另一个问题 准确检测圆角div的鼠标悬停事件

http://jsbin.com/oqewo - from this other question Accurately detect mouseover event for a div with rounded corners

我尝试实现它，但我确实提出了一些它作为动画不够流畅的东西(我尝试调试尝试用鼠标在徽标上前后移动以查看脚本的反应):

I tried to implement it and I did come out with something that it is not smooth enough as animation (I tried to debug trying to move back and forward with the mouse on the logo to see the reaction of the script):

$(".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;在我的函数开始时，因为我需要一个变量来让我知道动画何时完成，它隐藏在徽标后面或处于过渡状态.

I inserted a variable myHover = 0; at the start of my functions because I needed a variable that would let me know when the animation is completed, it is hidden behind the logo, or in transition.

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

And I don't know WHEN and HOW to use the .unbind property so I will not suck enough cpu. Is there anything better than mouseenter event? It triggers various time, and only when I move the mouse on the logo, and not when I have the mouse on the logo during the animation. Anyway any suggestion or revision of any kind on approach this problem it is more than welcome :)

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

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

更新

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

I might find a way, it seems to work, but I am not sure if it is possible to optimise/clean it, or if I am using unbind properly, someone can check my code?

$(".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 类，来自上述演示，定义为:

The SimpleCircle class used within this code, from the demo mentioned above, is defined as:

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;
  }
};

推荐答案

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

With regard to your update, it all looks good.

您可以通过颠倒两个 if() 参数的顺序以使 myHover != "transition1" 排在第一位，从而获得轻微的性能提升.&& 是短路的，因此如果 myHover != "transition1" 为 false，则不需要调用昂贵的循环包含检查.

You may get a slight performance upgrade by reversing the order of the two if() parameters so that myHover != "transition1" is first. The && is short-circuit, so if myHover != "transition1" is false, the expensive circle inclusion check does not need to be called.

同样在 else if() 上可能值得将一些变量设置为表示您已经将光标设置为停止连续调用的内容.

Also on the else if() might be worth having some variable set to something that says you have already set the cursor to stop that getting called continuously.

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

Looking at the SimpleCircle class, the only expensive operations it makes are two power calls and a square root (Math.pow() x 2 + Math.sqrt()). Whether or not it is worth trying to get that any faster is debatable, only optimisation I can think of there is to check if the coordinates are within the square within the circle which is four quick comparisons, this covers 50% of the interior points, but obviously slows down the other 50% of points. To see if it improved matters you would have to test it.

这篇关于如何使悬停仅在带有jquery的半径边框的div中的圆形区域上触发动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！