jQuery の animate() メソッドをアニメーション以外に応用する方法

前回と同じようなネタですが、今度は逆転の発想で jQuery.animate() をアニメーション以外にも応用する方法をご紹介します。時間の経過が伴う処理の場合は今回の方法を使ったほうが直感的です。

謝辞

今回のサンプルは Steven Wittens 氏の canvas 要素に対して jQuery.animate() 関数を利用する方法を参考にさせていただきました。

http://acko.net/blog/abusing-jquery-animate-for-fun-and-profit-and-bacon

上記ページのデモの空中をベーコンが飛び交うさまは一見の価値ありです。(笑)


jQuery.animate() で音声のフェードイン・フェードアウトを実装する

Live Demo (requires Google Chrome, Firefox 3.5 or higher, Safari 3 or higher)

HTML5 から audio 要素と JavaScript を使ってネイティヴで音声を再生・制御する仕組みが用意されました。この機能を使ってオーディオのフェードイン・フェードアウトを jQuery.animate() メソッドを応用して実装してみます。

HTML

<body>
	<div>
		<button id="fadeIn">Fade In</button>
		<button id="fadeOut">Fade Out</button>
	</div>
	<audio>
		<!-- for Safari, Chrome -->
		<source src="sallsamma_ting.mp4" />
		<!-- for Firefox, Opera -->
		<source src="sallsamma_ting.ogg" />
	</audio>
</body>

制御用のボタンと、オーディオタグを記述しておきます。ブラウザによってサポートする音声形式が異なるので MP4 と Vorbis を指定しておきます。

JavaScript

// プロパティ保持用のダミーの div 要素を作成する
// jQuery.exntend() メソッドを使って volume というプロパティを初期値 0 で追加する
var vars = jQuery.extend($('<div>')[0], { volume: 0 });

jQuery(function($) {
	var audio = $("audio:first")[0];	// 要素の参照を取得する
	audio.volume = 0;	// 初期設定 (0 = 無音, 1 = 最大音量)

	// イベントの割り当て
	$("button#fadeIn").live("click", fadeIn);
	$("button#fadeOut").live("click", fadeOut);

	/**
	 * フェードインしながら再生開始
	 */
	function fadeIn(e) {
		if (!audio.paused) {
			return;
		}
		audio.play();
		$(vars).stop().animate({ volume: 1 }, {
			easing: "linear",
			duration: 2000,
			step: function() {
				audio.volume = this.volume;	// this == vars
			}
		});
	}

	/**
	 * フェードアウトしながら再生停止
	 */
	function fadeOut(e) {
		if (audio.paused) {
			return;
		}
		$(vars).stop().animate({ volume: 0 }, {
			easing: "linear",
			duration: 2000,
			step: function() {
				audio.volume = this.volume;	// this == vars
			},
			complete: function() {
				audio.pause();
			}
		});
	}
});

3 行目がキモです。vars というダミーの要素を生成して volume というプロパティを追加します。fadeIn(), fadeOut()varsvolume プロパティを jQuery.animate() で操作することにより、フェードイン・フェードアウトを実現しています。もちろんイージングを取り替えたり duration を変更してフェードの効果を変更することも可能です。

いかがでしたでしょうか。今回は音声のフェードイン・フェードアウトを実装してみましたが、他にも色々応用できると思います。ぜひチャレンジしてみてください!それでは!

preload preload preload