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

  • マンツーマン個別講義開催中!

    勉強に行き詰まっていませんか?
    エラーの解消から、実装方法まで丁寧に教えます!
    講師が答えられるなら、基本的にどんな内容でもOK!

    詳細はこちら!
  • スクール形式講義

    プロを目指す方・講義を何回も受けられる方はこちら
    個別のカリキュラムを作成し、長期的にサポート!

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


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

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

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

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

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

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

関連する動画リスト

もっとみる