【初級編DAY17】よくあるアニメーションを自在に作れるようになろう①

これまで学んだことの復習を兼ねてコーディングノックに挑戦！

この章で新しく覚えておきたいこと、もしくは追加して覚えておきたいことをメモとして残します。

ボタンクリックでアラートを表示しよう

// javaScript

document.querySelector("#js-button-alert")

  .addEventListener("click", function () {

    alert("おはよう！");

  });

// jQuery

jQuery("#js-button-alert").on("click", function () {

  alert("おはよう！");

});

過去の記事を見て復習する

JavaSprict

👇セレクタ要素の取得、イベント監視復習👇

chimu-dailytry.hatenablog.com

jQuer

👇セレクタ要素の指定👇

chimu-dailytry.hatenablog.com

👇イベント監視（.on）👇

chimu-dailytry.hatenablog.com

---

アコーディオンメニューを作ろう

jQuery(".js-accordion").on("click",function(){

    jQuery(this).next("p").slideToggle();

});

過去の記事を見て復習する

■兄弟要素（.next）について■

該当するセレクタ要素の後ろに.next(指定したいセレクタ)とすることで、次の兄弟要素を指定できる。

※兄弟要素とは同じレベルにいる要素

👇兄弟要素の復習👇

chimu-dailytry.hatenablog.com

新しく覚えたいこと

■.slideToggle();■

スライドをして表示・非表示をさせるメソッド。
表示されている時は隠し、隠れている時は表示する。

これまではスライドして表示、スライドして消える、の処理のみでしたが、slidetriggerを使うことで状況に応じ開き閉じが可能となる便利なコードですね！

👇slideに関する復習👇DAY16記事に追記しました。

chimu-dailytry.hatenablog.com

---

トップへ戻るボタンを作ろう

jQuery("#js-button-top").on("click",function(){

    jQuery("html,body").animate({scrollTop:0},500);

});

jQuery("html,body").animate({scrollTop:0},500);についての解説

1. htmlの下にある要素bodyタグを指定
   まずは画面のスクロール位置を取得したい。HTML要素（body要素）を対象にして実行している。
2. .animateにてscrolltop:0は画面の最上部の位置に移動するという意味
3. 引数500は「500ms（0.5秒）時間をかける」という意味

新しく覚えたいこと

■.animate()■

特定のHTML要素のCSSプロパティを連続して変化させることでアニメーションを実現してくれます。

基本記述

対象要素.animate( {CSSプロパティ}, duration, easing, 関数 )

※cssプロパティは必須、それ以外は省略可能

出来ること

• css（fontsizeや幅など）
• スクロール位置を動かす

参考記事

.animate() | jQuery API Documentation

【jQuery入門】animate()の使い方とアニメーション事例まとめ！ | 侍エンジニアブログ

---

ドロワーメニューを作ろう

jQuery("#js-button-drawer").on("click",function(){

    jQuery(this).toggleClass("is-checked");

    jQuery("#js-drawer").slideToggle();

    jQuery("body").toggleClass("is-fixed")

});

新しく覚えたいこと

■.toggleClass■

classのつけ外しをするメソッド。同一のclassがついているときは外し、ついていないときはつける

addClassメソッドと removeClassメソッドでつけ外しが可能と学びましたが、こちらはその状況に合わせてつけはずしを行ってくれる便利なメソッドです。

👇classの追加・削除に関する復習👇DAY16記事に追記しました。

chimu-dailytry.hatenablog.com

---

次章で、最終問題「フォームに入力された値をアラートに表示しよう」をまとめます。（長くなってしまったので、別記事にてUPします。）

いよいよ実践的な動きのあるサイト作りに近づいてきました。まだまだ色んなメソッドや使い方など知らないことも多くあるとは思いますが、一つ一つ攻略していきましょう♫

今日はここまで。お疲れ様でした♫