私はプログラマーではなく、状況を解決するために最善を尽くしていますが、数時間と頭痛の後で私はあきらめます私は助けを求めています。jqueryと半径の境界を持つ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;
});
});
：
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を挿入しました。アニメーションが完了したときにそれを知らせる変数が必要だったので、私の機能の開始時に、それはロゴの後ろに隠れていました。
そして、私は十分なCPUを吸っていないので、いつでも.unbindプロパティを使うのは分かりません。 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;
}
};
私は答えを要求 – Littlemad