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