如何使盘旋触发动画只能在一个圆圈区域的div与jQuery的半径边界 [英] How to make the hovering trigger an animation only on a circle area in a div with radius border with jquery
问题描述
我不是一个程序员，我想我最好的解决情况，但几个小时后头痛我放弃了，我寻求帮助。
我有一个圆形的标志（有足够的半径像素的div成为一个圆，它的一些文本），我有一个动画，从背后的标志出来的时候我将鼠标悬停于它。
我注意到，我的动画它触发的圆形标志和持有标志（它仍然是一个正方形）在div之间的空白区。
此刻我的脚本是这样的：
$（＃标志）。悬停（函数（事件）{//悬停
myHover =转型;
$（＃黑），停止（）动画（{顶： - 200像素}。，速度/ 2，函数（）{
myHover = 1;
}）;
}，函数（事件）{//完成徘徊
myHover =转型;
$（＃黑），停止（）动画（{顶：0像素}。，速度/ 2，函数（）{
myHover = 0;
}）;
}）;
我试图寻找在网络上和堆栈溢出找到的东西，这将有助于我，我发现最近事情是这样的：
http://jsbin.com/oqewo - 从这个另一个问题<一href=\"http://stackoverflow.com/questions/2006419/accurately-detect-mouseover-event-for-a-div-with-rounded-corners\">Accurately检测与圆角的div鼠标悬停事件
I试图执行它，我做出来的东西，这还不够顺畅动画（我试着调试试图搬回并用鼠标转发上的标识，看剧本的反应）：
<$ C $Ç> $（。myCircle）。悬停（
//当鼠标进入箱子做...
功能（）{
变量$箱= $（本），
偏移量= $ box.offset（），
半径= $ box.width（）/ 2，
圈=新SimpleCircle（offset.left +半径，offset.top +半径，半径）; $ box.mousemove（函数（五）{
如果（circle.includesXY（e.pageX，e.pageY）及和放大器;！myHover =转型）{
$（本）的.css（{光标：指针}）;
myHover =转型;
$（＃黑），停止（）动画（{顶： - 200像素}。，速度/ 2，函数（）{
myHover = 1;
}）;
}否则如果（！circle.includesXY（e.pageX，e.pageY））{
$（本）的.css（{光标：默认}）;
myHover =转型;
$（＃黑），动画（{顶：0像素}，速度/ 2，函数（）{
myHover = 0;
}）;
}
}）; }，
//当鼠标离开盒子做...
功能（）{
//警报（IN）
//$(this).includesXY(e.pageX，e.pageY）
myHover =转型;
$（这）的.css（{光标：默认}）;
$（＃黑），停止（）动画（{顶：0像素}。，速度/ 2，函数（）{
myHover = 0;
}）;
}
）
我插一个变量myHover = 0;在我的职务，因为我需要一个变量，让我知道完成的动画时开始，它背后隐藏的标志，或转型。
和我不知道何时以及如何使用.unbind财产，所以我不会吸足够的CPU。
有什么比MouseEnter事件更好？它会触发不同的时间，只有当我移动上的标识鼠标，而不是当我在标志上鼠标在动画过程。反正任何形式的做法任何建议或修改这个问题是无任欢迎：）
=====
更新
我可能会找到一种方法，它似乎工作，但我不知道是否可以优化/擦干净，或者如果我使用解除绑定正确的，有人可以检查我的code？
$（。myCircle）。悬停（
//当鼠标进入箱子做...
功能（）{
变量$箱= $（本），
偏移量= $ box.offset（），
半径= $ box.width（）/ 2，
圈=新SimpleCircle（offset.left +半径，offset.top +半径，半径）; $ box.mousemove（函数（五）{
如果（circle.includesXY（e.pageX，e.pageY）及＆放大器;！myHover =transition1）{
$（本）的.css（{光标：指针}）;
myHover =transition1;
$（＃黑），停止（）动画（{顶： - 200像素}。，速度/ 2，函数（）{
myHover = 1;
}）;
} 否则如果（！circle.includesXY（e.pageX，e.pageY））{
$（本）的.css（{光标：默认}）;
如果（myHover == 1 || myHover ==transition1）{
myHover =transition0;
$（＃黑），停止（）动画（{顶：0像素}。，速度/ 2，函数（）{
myHover = 0;
}）;
}
}
}）; }，
//当鼠标离开盒子做...
功能（）{
如果（myHover == 1 || myHover ==transition1）{
myHover =transition0;
$（本）的.css（{光标：默认}）;
$（＃黑），停止（）动画（{顶：0像素}。，速度/ 2，函数（）{
myHover = 0;
}）
};
$（＃集装箱）解除（'鼠标移动'）;
}
）
这code范围内使用，从上述演示的 SimpleCircle 类，定义为：
函数SimpleCircle（X，Y，R）{
this.centerX = X;
this.centerY = Y;
this.radius = R;
}SimpleCircle.prototype = {
distanceTo：功能（pageX属性，pageY）{
返回的Math.sqrt（Math.pow（pageX属性 - this.centerX，2）+ Math.pow（pageY - this.centerY，2））;
}，
includesXY：函数（X，Y）{
返回this.distanceTo（X，Y）与所述; = this.radius;
}
};
对于您的更新，这一切看起来不错。
您可以通过反转两个如果（）参数的顺序，使 myHover！=transition1第一。在＆放大器;＆安培;！是短路，因此，如果 myHover =transition1是假的，贵圈列入检查并不需要被调用
另外关于否则，如果（）可能是值得有一些变量设置的东西，说你已经设置光标停止得到不断调用。
综观 SimpleCircle 类，它使得不仅价格昂贵操作是两个功率电话和平方根（ Math.pow（）×2 +的Math.sqrt（））。不管它是不是值得试图让任何快是值得商榷的，只有我能想到的有检查如果坐标这为四个快速比较的圆内的正方形内优化，这包括内部点的50％，但很明显减慢点的另外50％。看它是否提高的问题，你就必须对它进行测试。
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.
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.
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 - 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;
});
}
)
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.
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 :)
==========================
UPDATE
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');
}
)
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.
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.
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.
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.
这篇关于如何使盘旋触发动画只能在一个圆圈区域的div与jQuery的半径边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
