jQueryのslideUp, slideDown, slideToggleについてと、JSでの書き換え 前編

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

    エラーの解消から、
    実装方法まで丁寧に教えます!
    講師が答えられるなら、
    基本的にどんな内容でも
    OK!

    詳細はこちら!
  • 質問し放題プラン!
  • スクール形式講義も

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

    詳細はこちら!
  • discordコミュニティ
この動画の後編はこちら
https://factory-programming-mv.com/video/gNn-1dErYAk/


この動画では、ウェブページ上の要素の表示切り替えをスライドの形式で行う手法について説明されています。具体的には「slideUp」「slideDown」「slideToggle」の使い方と、それをJavaScriptでどのように書き換えるかが主なテーマです。

まずは、HTMLの構造について説明しています。ボタン(「スライドダウン」、「スライドアップ」、「スライドトグル」)やテキストなどの要素を配置し、それらを動作させるコードを組むという流れになります。

さらに、各ボタンが押された際の動作について説明があります。jQueryを使ってボタンをクリックした時に何が起こるかを制御しています。「スライドダウン」をクリックすると要素が下にスライドしながら表示され、「スライドアップ」をクリックすると要素が上にスライドしながら消え、「スライドトグル」をクリックすると要素の表示・非表示が交互に切り替わるという動作を設定しています。

アニメーションの速度を制御するための引数設定についても説明しています。引数に指定した時間(ミリ秒)でスライドアニメーションの速度を調整することが可能です。

この動画は前半部分であり、後半では同じ機能をJavaScriptだけで実装する方法について解説される予定です。この動画を見ることで、初心者でも理解できるような形でスライド効果を使用するための基本的なスキルを習得することが可能です。

関連する動画リスト

もっとみる