jQueryプラグインテスト。RayEffectのJS版。RayEffectのエフェクト自体はこちらを参考にしています。→http://wonderfl.net/c/NspJ

jquery.rayeffect.js

(function($){
  $.fn.rayeffect = function(config){
		var defaults = {
			duration:1000
		}
		var options = $.extend(defaults, config);
		return this.each(function(index){
			var TIME = options.duration;

			var ct = $(this);
			var w = ct.width();
			var h = ct.height();

			var elem = $(document.createElement("div"));
			elem.attr("id", "rayEffectTarget" + index);
		    
			var src = ct.attr("src");
			elem.css({position:"relative", width:w, height:h, overflow:"hidden", background:"url(" + src + ")"}).animate({width:w}, TIME, "linear");
			var rayElem = $(document.createElement("div"));
			var cloneImg = ct.clone();
			rayElem.append(cloneImg);

			rayElem.css({width:1, height:h, left:0, top:0, position:"absolute", overflow:"hidden"});
			setTransformScaleLT(rayElem, w, 1);
			cloneImg.css({position:"absolute", display:"block"}).animate({left:-w}, TIME, "linear");
			rayElem.animate({left:w}, TIME, "linear");
		    
			elem.append(rayElem);
			var parent = ct.parent();
			parent.append(elem);

			ct.remove();
			$.when(rayElem, cloneImg).done(function(){
				elem.remove();
				parent.append(ct);
			});
		});

		function setTransformScaleLT(jqElem, scaleX, scaleY){
			jqElem.css("-webkit-transform", "scale(" + scaleX + "," + scaleY + ")")
			.css("-moz-transform", "scale(" + scaleX + "," + scaleY + ")")
			.css("-o-transform", "scale(" + scaleX + "," + scaleY + ")")
			.css("-ms-transform", "scale(" + scaleX + "," + scaleY + ")")
			.css("transform", "scale(" + scaleX + "," + scaleY + ")");

			jqElem.css("-webkit-transform-origin", "0 0")
			.css("-moz-transform-origin", "0 0")
			.css("-o-transform-origin", "0 0")
			.css("-ms-transform-origin", "0 0")
			.css("transform-origin", "0 0");
		}
	};
})(jQuery);