スプラッシュ画像を表示するjQueryプラグイン

SplashExtention.js

// jqueryとjquery-easingが必要
$.extend({
	splash : function(imageUrl) {
		var splashBack = $('<div id="splash-extention-back" style="background-color:#000;opacity:0;position:absolute;top:0;left:0;z-index:10000;"/></div>');
		splashBack.width($(document).width());
		splashBack.height($(document).height());
		
		var splash = $('<div id="splash-extention" style="opacity:0;position:absolute;top:50%;left:50%;z-index:10001; height:' + SplashExtention.ImageHeight +';"/></div>');
		var img = $('<img src="' + imageUrl + '" style="height: 100%;" />');
		splash.append(img);
		
		img.bind("load", function() {
			splash.css({
                marginTop: -1 * (splash.height() / 2) - SplashExtention.AnimationMovingPixel,
                marginLeft: -1 * (splash.width() / 2),
            });
			splashBack.animate({
				opacity: 0.75,
			}, 
			SplashExtention.AnimationDuration / 2,
			SplashExtention.AnimationEasing, 
			function() {
				splash.animate({
					opacity: 1.0,
					marginTop: -1 * (splash.height() / 2),
				}, 
				SplashExtention.AnimationDuration, 
				SplashExtention.AnimationEasing, 
				function(){
					setTimeout(function() {
						splash.animate({
							opacity: 0,
							marginTop: -1 * (splash.height() / 2) - SplashExtention.AnimationMovingPixel,
						}, 
						SplashExtention.AnimationDuration, 
						SplashExtention.AnimationEasing, function() {
							splash.remove();
						});
						
						splashBack.animate({
							opacity: 0,
						}, 
						SplashExtention.AnimationDuration / 2, 
						SplashExtention.AnimationEasing, function() {
							splashBack.remove();
						});
					}, SplashExtention.DisplayingDuration);
				});
			});
		});
		
		$("html").append(splashBack);
		$("html").append(splash);					
	}
});
var SplashExtention = {
	ImageHeight: "75%",
	AnimationEasing: "easeOutExpo",
	AnimationDuration: 500,
	AnimationMovingPixel: 10,
	DisplayingDuration: 2000,
};