jQueryで簡単にフェードイン・フェードアウトができる、fadeIn・fadeOut・fadeToggleとJSでの書き換え 前編

後半の動画はこちらです。
https://factory-programming-mv.com/video/vu2hvAWuq5Q/


この動画では、jQueryのフェードエフェクト（フェードイン、フェードアウト、フェードトグル）の使用法と、それらをJavaScriptで書き換える方法について解説しています。

最初に、HTMLを使って表示切り替えのボタンと切り替える対象の要素（テキストエリア）を作成します。次にCSSを使って、ボタンとテキストエリアの見た目を調整します。ここで使用されるCSSのプロパティには、ボーダー(枠線)、背景色、フォントサイズ、パディング（内側の余白）等が含まれます。

その後、jQueryのフェードアウトを使用し、ボタンをクリックするとテキストエリアが徐々に消える（フェードアウト）動きを作ります。要素の透明度が徐々に下がり、最終的には「display: none;」の状態になることで要素が非表示になります。

同様に、jQueryのフェードインを使用すると、ボタンをクリックすると「display: none;」の状態から要素が徐々に表示される（フェードイン）動きを作ります。要素の透明度が徐々に上がり、最終的には「display: block;」の状態になることで要素が表示されます。

最後に、jQueryのフェードトグルを使うと、ボタンをクリックすると表示されている要素がフェードアウトし、非表示の要素がフェードインするという動きを作ります。これにより、要素の表示・非表示を簡単に切り替えることが可能になります。

また、要素の取得や関数の書き方（アロー関数等）についての説明も行われており、JavaScriptの基本的な知識を身につけることが可能です。