要素をフェードイン・フェードアウトする

要素をフェードインまたはフェードアウトするには、次のような方法で実装できます。

デモ

サンプル

関数定義

この関数はCSSのopacityの値をsetIntervalで変更して効果を実装しています。

JavaScript

/**
 * フェードイン
 * @param {Element} element 適用する要素
 * @param {number} [time=400] 効果時間(ミリ秒で指定)
 * @param {Function} [callback] 完了後のコールバック関数
 * @return {Element} 適用した要素を返す
 */
var fadeIn = function(element, time, callback) {
	var fadeTime     = time ? time : 400,
	    keyFrame     = 30,
	    stepTime     = fadeTime / keyFrame,
	    maxOpacity   = 1,
	    stepOpacity  = maxOpacity / keyFrame,
	    opacityValue = 0;

	if (!element) return;

	if (element.getAttribute('data-fade-stock-display') !== undefined &&
		element.getAttribute('data-fade-stock-display') !== null) {
		element.style.display = element.getAttribute('data-fade-stock-display');
	}

	var setOpacity = function(setNumber) {
		if ('opacity' in element.style) {
			element.style.opacity = setNumber;
		} else {
			element.style.filter = 'alpha(opacity=' + (setNumber * 100) + ')';

			if (navigator.userAgent.toLowerCase().match(/msie/) &&
				!window.opera && !element.currentStyle.hasLayout) {
				element.style.zoom = 1;
			}
		}
	};

	if (!callback || typeof callback !== 'function') callback = function() {};

	setOpacity(0);

	var sId = setInterval(function() {
		opacityValue = Number((opacityValue + stepOpacity).toFixed(12));

		if (opacityValue > maxOpacity) {
			opacityValue = maxOpacity;
			clearInterval(sId);
		}

		setOpacity(opacityValue);

		if (opacityValue === maxOpacity) callback();
	}, stepTime);

	return element;
};

JavaScript

/**
 * フェードアウト
 * @param {Element} element 適用する要素
 * @param {number} [time=400] 効果時間(ミリ秒で指定)
 * @param {Function} [callback] 完了後のコールバック関数
 * @return {Element} 適用した要素を返す
 */
var fadeOut = function(element, time, callback) {
	var fadeTime     = (time) ? time : 400,
	    keyFrame     = 30,
	    stepTime     = fadeTime / keyFrame,
	    minOpacity   = 0,
	    stepOpacity  = 1 / keyFrame,
	    opacityValue = 1;

	if (!element) return;

	element.setAttribute('data-fade-stock-display', element.style.display.replace('none', ''));

	var setOpacity = function(setNumber) {
		if ('opacity' in element.style) {
			element.style.opacity = setNumber;
		} else {
			element.style.filter = 'alpha(opacity=' + (setNumber * 100) + ')';

			if (navigator.userAgent.toLowerCase().match(/msie/) &&
				!window.opera && !element.currentStyle.hasLayout) {
				element.style.zoom = 1;
			}
		}
	};

	if (!callback || typeof callback !== 'function') callback = function() {};

	setOpacity(1);

	var sId = setInterval(function() {
		opacityValue = Number((opacityValue - stepOpacity).toFixed(12));

		if (opacityValue < minOpacity) {
			opacityValue = minOpacity;
			element.style.display = 'none';
			clearInterval(sId);
		}

		setOpacity(opacityValue);

		if (opacityValue === minOpacity) callback();
	}, stepTime);

	return element;
};

使い方

引数

フェードインはfadeIn関数、フェードアウトはfadeOut関数を使用します。

引数名 説明
第一引数
必須
element Element 適用する要素(エレメント)
第二引数 time number 効果時間(ミリ秒で指定)
第三引数 callback Function 完了後のコールバック関数

サンプルコード

JavaScript

var sampleElmt     = document.getElementById('sample'),
    fadeInBtnElmt  = document.getElementById('fade-in'),
    fadeOutBtnElmt = document.getElementById('fade-out');

// フェードイン
fadeInBtnElmt.onclick = function() {
	fadeIn(sampleElmt, 1000);
};

// フェードアウト
fadeOutBtnElmt.onclick = function() {
	fadeOut(sampleElmt, 1000);
};

JavaScript逆引きリファレンス一覧へ戻る