如何使用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％的點數。 要查看它是否有所改善，您必須對其進行測試。