【jQuery入門】フォトギャラリーにアニメーション機能を追加する

ソースコード

<ul id="list">
  <li><img src="https://placehold.jp/50x50.png" alt="画像1" /></li>
  <li><img src="https://placehold.jp/60x60.png" alt="画像2" /></li>
  <li><img src="https://placehold.jp/70x70.png" alt="画像3" /></li>
  <li><img src="https://placehold.jp/80x80.png" alt="画像4" /></li>
  <li><img src="https://placehold.jp/90x90.png" alt="画像5" /></li>
</ul>
<hr />
<img id="big" />

$(function () {
  $("#big")
    .on("error", function () {
      $(this).attr("src", "../images/noimg.jpg");
    })
    .attr("src", $("#list img:first-child").attr("src"));
  $("#list img").click(function () {
    var img = $(this);
    $("#big")
      .hide(1000, function () {
        $(this).attr("src", img.attr("src"));
      })
      .show(2000);
  });
});

#list {
  margin: 0px;
  padding: 0px;
}

#list li {
  margin: 2px;
  height: 40px;
  list-style-type: none;
  float: left;
}

#list img {
  width: 55px;
  height: 40px;
}

hr {
  clear: both;
}

#big {
  width: 315px;
  height: 235px;
}

See the Pen
jQuery17-1 by shinjiezumi (@sezumi)
on CodePen.

<!DOCTYPE html>

ツールチップ

jQueryのパッケージは、production、developmentという2種類の形式で提供されています。

アニメーション機能の基本

メソッド	概要
show	非表示になっている要素を表示状態に
hide	表示状態の要素を非表示に
toggle	要素の表示／非表示を交互に切り替え
slideDown	非表示の要素をスライドさせつつ表示
slideUp	表示中の要素をスライドさせつつ非表示に
slideToggle	スライドアップ／スライドダウンを交互に実行
fadeIn	非表示の要素をフェードイン
fadeOut	表示中の要素をフェードアウト
animate	指定されたパラメータに従ってアニメーションを実行

アニメーション機能の呼び出し

$(セレクター).アニメーションメソッド(ミリ秒)

アニメーションメソッドのところには、show, hide, toggleなどを指定する。時間はミリ秒単位で指定する

show, hideメソッドで画像の表示／非表示を切り替える

画像の表示／非表示を行う

画像の表示／非表示を切り替えるためには、show／hideメソッドを使う。

正確には、showメソッドは、左上から右下に向けて徐々に要素を大きくし、かつ、透明から不透明に表示を濃くしながら、最終的に表示状態にする。
hideメソッドは、右下から左上に向けて徐々に要素を小さくし、かつ、不透明から透明に徐々に表示を薄くしながら、最終的に表示するためのメソッド。

時間を指定しなかった場合はアニメーションを行わず単に表示の切り替えを行う

アニメーションは順番に実行する

$('#big').hide(1000).show(2000)

上記は1000ミリ秒かけて画像を隠したあと、２０００ミリ秒かけて再表示する。
メソッドチェーンで連結して呼び出した場合、jQueryはアニメーション処理を前から順番に実行する。指定されたアニメーションが同時に実行されるわけではない。

アニメーションが完了したときに処理を行う

$('#hoge').hide(1000, function(){
  $(this).attr('src', img.attr('attr'))
})

アニメーションメソッドでは時間のうしろにfunction(){...}の形式でアニメーションが完了した後の処理を指定できる。このような処理をコールバック処理と呼ぶ

えず

東京でフリーランスのWebエンジニアやっています。今はPHPとGoをメインに、プライベートでは広く浅くをモットーにフロント〜インフラまで学習しています。当面の目標はDevOps寄りのオールラウンダー。