为我拥有的动画函数创建一个通用函数

Question

我正在学习 Jquery，并且正在制作我的新网站。不幸的是，我更像是一名网页设计师（在设计方面的经验比在编程方面的经验更多），并且我一直致力于创建一个通用函数，以便我可以将它用于 html 中的各种 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(myHover != "transition1" && circle.includesXY(e.pageX, e.pageY)){
             $(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;
                    });
                    $("body").unbind('mousemove');
                }
            }
       });

    },
    // 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;
            })
        };
        $("body").unbind('mousemove');
    }
);

动画是一个带有半径角的div，看起来像一个圆圈，当我将鼠标悬停在圆圈后面时，我会激活圆圈后面的动画。

我想要实现的目标不是当我想将它用于多个 div/circle 时始终编写相同的长函数。但重新使用通用函数。

类似这样的函数： function CircleHover(myCircle, myTarget, eventIn(), eventOut())

其中 myTarget 可以是任何其他元素，甚至是相同的 myCircle，而 eventIn() 和 eventOut() 不是动画（或任何东西） else) 分别针对鼠标进入和离开的情况。

我在以通用方式创建

$("#black").stop().animate({"top":"-200px"}, speed/2, function(){ 我的悬停 = 1; });

我很抱歉我的愚蠢问题，我真的不知道在哪里寻找答案或在哪里了解更多信息。

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

更新 - 12 月 1 日 最后我得到了这段代码。我认为这只是我想要的一半。

function aniCircle(in_out, myThis, target, endPos, movePos, speed){
    if(typeof speed == "undefined"){speed = speed2};

    if(in_out == 1){
        var $box = myThis,
        offset = $box.offset(),
        radius = $box.width() / 2,
        circle = new SimpleCircle(offset.left + radius, offset.top + radius, radius);

        $box.mousemove(function(e){
            if(myHover != "transition1" && circle.includesXY(e.pageX, e.pageY)){
                $(this).css({"cursor":"pointer"});
                myHover = "transition1";

                $(target).stop().animate(movePos, speed, function(){
                    myHover = 1;
                });
            }else if(!circle.includesXY(e.pageX, e.pageY)){
                $(this).css({"cursor":"default"});
                if(myHover == 1 || myHover == "transition1"){
                    myHover = "transition0";
                    $(target).stop().animate(endPos, speed, function(){
                        myHover = 0;
                    });
                    $("body").unbind('mousemove');
                }
            }
        });
    }else if(in_out == 0){
        if(myHover == 1 || myHover == "transition1"){
            myHover = "transition0";
            myThis.css({"cursor":"default"});
            $(target).stop().animate(endPos, speed, function(){
                myHover = 0;
            })
        };
        $("body").unbind('mousemove');
    }
}

回顾这样的功能，

$("#logo").hover(
    // when the mouse enters the box do...
    function(){
        aniCircle(1, $(this), "#black", {"top":"0px"},{"top":"-200px"});
    },
    // when the mouse leaves the box do...
    function() {
        aniCircle(0, $(this), "#black", {"top":"0px"});
    }
);

我很难添加各种行为，例如使用曲线动画制作目标动画（路径插件 - 弧线、贝塞尔曲线和正弦动画曲线）。

我不希望解决这个问题，但我至少想对代码进行审查以了解我可以优化的内容。我觉得代码有点重复而且丑陋。

Answer 1

查看这些链接：
http://www.queness.com/post/112 /a-really-simple-jquery-plugin-tutorial

http://docs.jquery.com /插件/创作

Answer 2

我认为您只需要更新每个函数中的目标，这样就不再寻找具有 id 的节点，而是寻找具有类的节点。因此，不要使用 $('#black') 作为选择器，而是将 id="black" 更改为具有类的节点 - 例如：class="black"。然后，在每个函数中，使用 jQuery 的 next 方法来定位下一个被归类为“black”的节点：

$box.next('.black').stop()...

您还可以继续将其开发为插件，但您可能不需要 - 这完全取决于您。您所拥有的（使用更新的定位方法）将适用于 $('.myCircle') 选择器返回的所有元素。