为我拥有的动画功能创建通用功能

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

类似的函数：function circleHover(myCircle, myTarget, eventIn(), eventOut())

其中 myTarget 可以是任何其他元素，甚至可以是同一个 myCircle，而 eventIn() 和 eventOut() 就是鼠标进入和离开时的动画（或其他任何东西）。

我在以通用方式创建这个时遇到了很大的麻烦

$("#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/Plugins/Authoring

Answer 2

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

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

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