jQueryで画像の再生&停止エフェクト

暑いですね。今回はパーツの解説を少し...

200x200pxの画像を用意します。

クリックすると小さくなりながら消え、またクリックすると大きくなりながら消えます。

後で気づきましたが、jQueryUIに用意されているのアニメーション「Puff」とほぼ同じですね...

デモ

コード

html


<div id="wrap">
  <img id="play" src="play.png" alt="play" width="200" height="200">
</div>

css


#wrap{
  width  : 100%;
  height : 300px;
  position : relative;
}
#play{
  position : absolute;
  display  : block;
}

javascript


jQuery(document).ready(function($) {
  var $play, $wrap, max, min, pHeight, pWidth, reset, start, stop, flag;
  // 対象画像の外側タグ wrapper
  $wrap   = $('#wrap');
  // 対象画像 target image
  $play   = $('#play');
  // 画像サイズ取得 get target image size
  pWidth  = $play.width();
  pHeight = $play.height();
  // 最小サイズ minimum size
  min = {
    width  : 50,
    height : 50
  };
  // 最大サイズ maximum size
  max = {
    width  : 300,
    height : 300
  };


  // 画像位置&サイズ初期化 position and size reset
  reset = function() {
    $play.css({
      width  : pWidth,
      height : pHeight,
      top    : ($wrap.height() - pWidth) / 2,
      left   : ($wrap.width() - pHeight) / 2
    });
  };
  reset();
  $(window).on('resize', reset);

  // start effect
  start = function() {
    $play.stop().animate({
      opacity : 1
    }, 300).animate({
      opacity : 0,
      width   : min.width,
      height  : min.height,
      top     : "+=" + (pHeight - min.height) / 2,
      left    : "+=" + (pWidth - min.width) / 2
    }, {
      duration : 200,
      complete : reset
    });
  };
  // stop effect
  stop = function() {
    $play.stop().animate({
      opacity : 1
    }, 300).animate({
      opacity : 0,
      width   : max.width,
      height  : max.height,
      top     : "-=" + (max.height - pHeight) / 2,
      left    : "-=" + (max.width - pWidth) / 2
    }, {
      duration : 200,
      complete : reset
    });
  };


  // クリックでstart/stopをトグル toggle start/stop by click event
  //$wrap.toggle(start, stop); ← 非推奨
  flag = 1;
  $wrap.on('click', function(){
    if (flag) {
      start();
      flag = 0;
    }
    else {
      stop();
      flag = 1;
    }
  });

});

ポイント

画像を中心に配置する

画像はposition:absolute;で他の要素に影響を与えないようにします。

#wrapはposition:absolute;の要素を含んでいるので、position:relativeを指定し子要素の基準になるようにします。

中心に持ってくるためには縦横それぞれ、親要素のサイズから子要素の大きさを引いて2で割った値をtop,leftとして指定します。

jQuery

2つのエフェクトを関数(startとstop)に指定します。また、それらを行った後に画像のCSSをリセットする関数(reset)を使います。

animateメソッドを使って動きを出します。
$(要素).animate({スタイル},{duration:ミリ秒数,easing:動き方,complete:完了後に指定関数を実行});
スタイル以降は以下のように省略可能です。
$(要素).animate({スタイル});
animateの手前にはstopメソッドを置きます。これは連続でクリックされた場合に動作が重複するのを防ぐためです。stopという関数を使ってしまい、紛らわしいですが別物です。

スタイル部分に "-=" "+=" を指定することで、現在の位置を取得してから計算することができます。現在の左位置が50だった場合 left: "+=100" で left: 150と同じになります。

クリックされたときにstartとstopを交互に呼び出します。