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（）在鼠标进入和鼠标离开时的情况下都不是动画（或其他任何内容）。

我在以通用方式创建这个

时遇到了大麻烦

$（“＃black”）。stop（）。animate（{“top”：“ - 200px”}，speed / 2，function（）{ myHover = 1; }）;

对不起我的愚蠢问题，我真的不知道在哪里寻找答案或在哪里了解更多。

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

更新 - 第一次DEC 最后我最终得到了这段代码。我认为这是我想要的一半。

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"});
    }
);

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

我不希望解决这个问题，但我想至少回顾一下我可以优化的代码。我觉得代码有点重复和丑陋。

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的下一个方法来定位被归类为“black”的下一个节点：

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

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

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

2 个答案: