【jQuery】一定の時間間隔で画像のサイズを変更する

こんにちは、Ryohei（@ityryohei）です！

一定の時間の間隔で画像のサイズを変更する方法をご紹介したいと思います。

やりたいことはとても単純で、画像要素に対してCSSで定義したclassを付けたり外したり付けたり外したり……を繰り返して画像の拡大縮小を実現したいと思います。

CSS3のkeyframeでも実現できる内容かもしれないですが、本記事ではjQueryを使った方法になりますので、予めご了承ください。

それでは、以下デモになります！

Demo

デモを見ていただくと、桜のアイコンのサイズが大きくなったり小さくなったり変化していると思います。こちらの動きは簡単なjQueryとCSSで実現しています。

早速、実装方法ご紹介したいと思います！

jQueryを読み込む

jQueryを利用するために、GoogleのCDNを利用してファイルを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>

上記のスクリプトをheadタグ内に記述することで、jQueryを読み込むことができます。

画像のサイズを変更する

HTML

htmlでは、imgタグを囲んでいるラッパーのサイズを設定します。複数のサイズを用意したい場合はラッパーをいくつか用意してサイズを設定すると良いと思います。

<div class="imgWrap">
  <img src="images/icon_sakura.png" alt="桜">
</div>

CSS

CSSでは画像サイズはラッパーの大きさで表示するため、横幅100%にしています。imgWrapには表示したい画像のサイズを、changeImgのclassには変更後のサイズ（拡大・縮小）を指定します。以下では縮小するように指定しています。

img {
  width: 100%;
  height: auto;
}
.changeImg {
  width: 75%;
}

JS

スクリプトはsetIntervalに指定した時間にtoggleClassを実行しています。toggleClassによってCSSで定義したclassの付け外しを実現しています。

$(function(){
  //imgタグ
  $img = $('img');
  //変更後のサイズを指定したclass
  changeImg = 'changeImg';
  setInterval(function(){
    $img.toggleClass(changeImg);
  //変更する時間
  },1000);
});

toggleClassの詳細については以下の記事で触れていますので、良ければ御覧ください。

クリックでclassを追加・削除する

以上、一定の時間間隔で画像のサイズを変更するのご紹介でした。

最後まで読んでいただき、ありがとうございました！