最終更新日:2019年09月25日jQueryのfadeToggle()メソッドを使ってHTML要素のフェードアウト・フェードインの切り替えをする方法について解説します。jQuery初心者向けに簡単なサンプルコードと共に説明します。fadeToggle()メソッドの基本的な使い方jQueryの「fadeToggle()メソッド」の基本書式は以下の通りです。●fadeToggle()メソッドの基本書式$("セレクター").fadeToggle()HTML要素をフェードする「fadeToggle()メソッド」の使い方について、実際のサンプルコードで動作を確認してみましょう。「jQuery_Sample1.html」をコピーして任意の場所に保存して下さい。src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").fadeToggle();});});</script></head><body><button>クリックして下さい</button><p>フェードします。</p><p>フェードします。</p><p>フェードします。</p></body></html>--------------------「fadeToggleメソッド」で段落(p)要素にフェード効果をかけてみましょう。ボタンをクリックすると、3つの段落要素がフェードアウトします。一度クリックすると再び段落が表示されます。「fadeToggle()メソッド」を使って、フェードする速度を指定してみましょう。サンプルコードの「jQuery_Sample2.html」をコピーして、任意の場所に保存して下さい。src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("p").fadeToggle("fast");});});</script></head><body><button>クリックして下さい</button><h1>jQuery入門</h1><h2>fadeToggleメソッドの使い方</h2><p>フェードします。</p><p>フェードします。</p><p>フェードします。</p></body></html>--------------------「fadeToggleメソッド」の引数にフェードを速くする「"fast"」か遅くする「"slow"」かを指定する事ができます。サンプルコードでは、「"fast"」を指定しています。ボタンをクリックすると段落タグがフェードしますが、引数を指定しない場合と比べ、速くフェードされます。「fadeToggle()メソッド」で、フェード効果の時間を指定してみましょう。サンプルコードの「jQuery_Sample3.html」をコピーして、任意の場所に保存して下さい。{margin:10px;background:#b20000;height:100px;width:150px;}</style></head><body><button>クリックして下さい</button><div>ボックス要素</div></body></html>--------------------「fadeToggleメソッド」の引数にフェードの時間を「ミリ秒」で指定します。サンプルコードでは「"7000"」を指定しましたので、ボタンをクリックすると赤いボックス要素が7秒かけてフェードアウトします。再度ボタンをクリックすると同じく7秒でボックスが表示されます。渋谷区Tweetおすすめ記事tableをレスポンシブ対応させるjQueryプラグイン「FooTable」tableをレスポンシブ対応させるjQueryプラグイン「FooTable」レスポンシブテーブルを作成するjQueryプラグインの「FooTable」について解説します。HTMLタグのテーブ...jQueryのremoveメソッドで要素を削除する方法jQueryのremoveメソッドで要素を削除する方法jQueryのremove()メソッドを使ってHTMLの要素を削除する事ができます。jQuery初心者向けに簡単なサンプ...jQueryのwrapメソッドでHTML要素を囲む方法jQueryのwrapメソッドでHTML要素を囲む方法jQueryのwrap()メソッドを使うと指定のHTML要素を囲む事が可能です。コーダーを募集します。運営会社|サイトマップ|利用規約|プライバシーポリシー|お問い合わせ|企業担当者様へインターノウスのプロエンジニアでは、ITエンジニア・IT技術者の上流工程求人や、転職・キャリアアップ情報を発信しています。プログラマ、SE、ネットワークエンジニア、ITコンサルなど上流、プロジェクトマネジメントを目指す全てのITエンジニアをサポートします。reserved.無料キャリア相談をする未経験からエンジニアを目指す。