プログラミング言語
jQuery

【jQuery入門④】メソッド紹介 ～アニメーション編～

プログラミング言語

この記事では、jQueryのメソッドの中から、アニメーションに関するメソッドを紹介していきます。ぜひ一緒にコードを書いて、動かしてみましょう。

環境構築

一緒に練習する方は、以下の3つのファイルを用意してください。
sample.html
sample.js
sample.jpg

sample.jpgは、お手持ちの好きな画像を使ってください。画像であれば、拡張子はjpg以外でも問題ありません。ファイル名によりimgタグの「src=”sample.jpg”」の部分を書き換えてください。
3つのファイルを同じフォルダに格納すれば、HTMLにJSファイルと画像ファイルを読み込めるようになっています。

※jQuery入門③の記事でHTML・CSSに関するメソッドを一緒に練習した方は、同名のファイルが既にあるかと思います。内容が異なりますので、復習したい方は別フォルダに移すなどしてバックアップを取ってくださいね。

HTMLファイルには、下記のコードをコピーしてください。

<!-- sample.html -->
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>サンプル</title>
  </head>
  <body>
    <button type="button" name="button1">ボタン</button>
    <div>
      <img src="sample.jpg" alt="" style="width: 200px">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="sample.js"></script>
  </body>
</html>

JSファイルには、まだ何も書かなくてOKです。

それでは早速、練習していきましょう。

hide()/show()メソッド

hide()メソッド

hide()メソッドは、要素を非表示にできるメソッドです。
ボタンを押したときに、画像を非表示にする処理を書いてみましょう。

$("button").click(function () {
  $("img").hide();
});

このように、画像が非表示になります。

show()メソッド

show()メソッドは、要素を表示させるメソッドです。

imgタグのスタイルに display: none を追加して、一旦画像を非表示にしましょう。

<!-- imgタグのみ抜粋 -->
<img src="sample_img.jpg" alt="" style="width: 200px; display: none">

画像を非表示にしたら、JSファイルを編集していきます。

$("button").click(function () {
  $("img").show();
});

ボタンを押して、画像を表示することができました。

fadeOut()/fadeIn() メソッド

fadeOut()メソッド

fadeOut()メソッドは、要素をフェードアウトして非表示にできるメソッドです。引数に細かい設定を指定することができますが、引数なしでも使用可能です。(以下、本記事で紹介するメソッドはすべて引数で細かい設定が可能です。)

$("button").click(function () {
  $("img").fadeOut();
});

引数なしで使うと、このようにフェードアウトします。

fadeIn()メソッド

fadeIn()メソッドは、要素をフェードインで表示できるメソッドです。

imgタグのスタイルに display: none を追加してから、試してみましょう。

<!-- imgタグのみ抜粋 -->
<img src="sample_img.jpg" alt="" style="width: 200px; display: none">
$("button").click(function () {
  $("img").fadeIn();
});

引数なしで使うと、このようにフェードインで表示されます。

slideUp()/slideDown()メソッド

slideUp()メソッド

slideUp()メソッドは、要素が下から上に縮小されていくように非表示にできるメソッドです。

$("button").click(function () {
  $("img").slideUp();
});

slideDown()メソッド

slideDown()メソッドは、要素が上から下に拡大されていくように表示できるメソッドです。

imgタグのスタイルに display: none を追加してから、試してみましょう。 

<!-- imgタグのみ抜粋 -->
<img src="sample_img.jpg" alt="" style="width: 200px; display: none">
$("button").click(function () {
  $("img").slideDown();
});

slideToggle()メソッド

先ほど紹介したslideUp()/slideDown()メソッドの応用版です。このメソッド一つで、「要素がない時は表示、ある時は非表示」という処理ができます。

$("button").click(function () {
  $("img").slideToggle();
});

さいごに

jQueryには、ほかにも多くのメソッドが用意されています。
興味のある人はぜひ調べてみてください。

次の記事では、関数の使い方を解説していきます！

【jQuery入門⑤】関数の使い方
この記事では、jQueryでの関数の作り方を解説していきます。 関数を使えば、繰り返し行う処理や長く複雑な処理をひとまとめにして、読みやすいコードを書くことができます。
snome.jp
2021.09.03
タイトルとURLをコピーしました