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

我正在学习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时，不要一直编写相同的长函数。但是重用一个泛型函数

函数类似于：函数circleHover（myCircle、myTarget、eventIn（）、eventOut（））

其中myTarget可以是任何其他元素，甚至可以是同一个myCircle，eventIn（）和eventOut（）都不是鼠标进入和离开时的动画（或任何其他内容）

我很难用一种通用的方式来创建这个

$（“#黑色”）.stop（）.animate（{“top”：“-200px”}，speed/2，function（）{ myHover=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"});
    }
);

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

我不希望解决这个问题，但我希望至少对我可以优化的代码进行一次审查。我觉得代码有点重复和难看。

查看以下链接：

---

我认为您只需要在每个函数中更新目标，这样就不用寻找具有id的节点，而是寻找具有类的节点。因此，不要使用$（'#black'）作为选择器，而是将

id=“black”

更改为具有类的节点，如：

class=“black”

。然后，在每个函数中，使用jQuery的next方法以分类为“black”的下一个节点为目标：

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

---

你也可以继续把它开发成一个插件，但你可能不需要——这完全取决于你。你所拥有的（使用更新的目标定位方法）将适用于$（'.myCircle'）选择器返回的所有元素。

很抱歉，但我不明白如何使通用的“$（“#黑色”）.stop（）.animate（{“top”：“-200px”}，speed/2，function（）{myHover=1；}）；“最后我得到了我想要的一半，因为我没有程序，所以我无法做到这一点：（-查看我添加了更新的帖子。）