0

所以我刚开始制作一个网页以进行更改，我想为一些按钮设置动画等等。所以我想做的是编写一个函数，它接受一个对象（在这种情况下是一个）并为悬停事件声明函数。该功能在此（无用）版本中完全正常：

    function hoverOver() {
        $(document).ready(function(){
            $("#FormA").hover(function(){
                $("#ButtonA").animate({marginLeft:"5px", opacity:"1"}, "fast");
            }, function(){
                $("#ButtonA").animate({marginLeft:"0px", opacity:"0.5"}, "fast");
            });
        });

但是为了在多个按钮上使用该功能，我想这样写：

    function hoverOver(source) {    
        $(document).ready(function(){
            source.parent().hover(function(){
                source.animate({marginLeft:"5px", opacity:"1"}, "fast");
            }, function(){
                source.animate({marginLeft:"0px", opacity:"0.5"}, "fast");
            });
        });
    }
    // this is how I want to call the function with multiple Buttons
    hoverOver($("#ButtonA"));

我还认为，如果我通过所有这样的函数传递源变量，它会起作用：

    function hoverOver(source) {
        $(document).ready(function(source){ //  <-- here
            source.parent().hover(function(source){ //  <-- here
                source.animate({marginLeft:"5px", opacity:"1"}, "fast");
            }, function(source){ // <-- and here
                source.animate({marginLeft:"0px", opacity:"0.5"}, "fast");
            });
        });
    }
    // this is how I want to call the function with multiple Buttons
    hoverOver($("#ButtonA"));

那么我的问题在哪里？我知道这种编码 JS 的方式不是最好的方式，特别是 JS、HTML 和 CSS 有数百万种方法可以做到，但我真的是 4 天前开始的。;)

谢谢

4

1 回答 1

0

如果你使用 jQuery，你不妨扩展它的原型，如下所示：

$.fn.hoverOver = function(){
    this.each(function(){
        var $this = $(this);
        $this.parent().hover(function(){
             $this.animate({marginLeft:"5px", opacity:"1"}, "fast"); 
        }, function(){
             $this.animate({marginLeft:"0", opacity:"0.5"}, "fast"); 
        });
    });
}

然后将它绑定到任何这样的元素；

$("#buttonA").hoverOver();

或这个：

$(".buttonHover").hoverOver();
于 2013-08-07T13:37:28.927 回答