要素をfadeInのようなパラメータとして受け取らない関数を作る方法

Question

ちょっと、みましょう：fadeIn（） fadeIn（）関数はパラメータを取るのではなく自動的に関数を作りたいと思っています。私が何を言っているのかを知っています。 例：jQueryの機能を作成することにより

function make100HW(el){ 
 
    $(el).animate({height:"100px",width:"100px"},400); 
 
} 
 

 
make100HW("#something"); 
 

 
//what I want is something like 
 
// $("#something").make100HW(); without putting the element inside the parameters. 
 
//just like $("#something").fadeIn();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="something" style="background:red"> 
 
</div>

Answer 1

jQueryプラグインを作成するには、$.fnを経由しても、通常は入手可能ですjQuery.fnオブジェクト（、しかしよくする機能を追加しますプラグインは、$がjQueryを参照すると仮定してはいけません。関数内で、thisは、プラグインが呼び出されたjQueryセットになります（ではなく、、個々のDOM要素はイベントハンドラのコールバックなどにあります）。

多くの場合、プラグインは補助機能を必要とするほど複雑になります。そのため、あなたは$に頼るべきではありませんので、それは生命維持のパラメータとして$を受け入れ、jQueryを渡すに包まれたプラグインのコードを参照するのが一般的です：

(function($) { 
    // Code using $ here, which is fine even though noConflict 
    // may have been used in the global context... 
})(jQuery); 

ので：

// Your plugin code 
 
(function($) { 
 
    $.fn.make100HW = function make100HW() { 
 
     // 1. Use `this`, which is hte current jQuery set 
 
     // 2. Return `this`, for chaining (which animate does) 
 
     return this.animate({height:"100px",width:"100px"},400); 
 
    }; 
 
})(jQuery); 
 

 
// Using it 
 
$("#something").make100HW();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="something" style="background:red"> 
 
</div>

Answer 2

：：私は機能を作る方法を知っている方法

あなたがいたかもしれない

$.fn.make100HW = function() { 
    // You can now use $(this) as the selected element(s): 
    $(this).animate({height:"100px",width:"100px"},400); 
}; 

グーグルで簡単に検索するか、jQuerで見つけるy docs。私が応答した理由は、より良い命名を提案することです：
あなたの関数は現在ハードコーディングされています。小さな微調整して、より良い命名を使用すると、任意のサイズのためにそれを使用することができます。

$.fn.makeSquare = function(size) { 
    const useSize = size || 100; 
    $(this).animate({height: useSize,width: useSize},400); 
}; 

Answer 3

は、設定された要素の高さと幅100pxにする前に、あなたは、CSSのコードを入れ

また

#something{opacity:0} 

function make100HW(el){ 
    $(el).animate({"height":"100px","width":"100px","opacity":"1"},400); 
} 

あなたが行うこの

function make100HW(el){ 
    $(el).css({"opacity":"0"}}).animate({"height":"100px","width":"100px","opacity":"1"},400); 
}