shrink-border.0.0.1.js

shrink-border.0.0.1.js

// shrink-border.0.0.1.js
// Author Kenji Wong
// Lastest Modification 25/4/2013

(function($) {
    $.fn.shrinkBorder = function(options) {
        var defaultOptions = {
	    	border : "10px solid #CCC",
	    	time   : 300,
	    	easing : "swing",
	    	zindex : "10"
		}
		var options = $.extend(defaultOptions, options);
		
	// iterate each matched DOM element
		return this.each(function() {
			var borderDiv = $("<div></div>");
			borderDiv.css("position", "absolute");
			borderDiv.css("width", $(this).width());
			borderDiv.css("height", $(this).height());
			borderDiv.css("border", options.border);
			borderDiv.css("z-index", options.zindex);

			var borderWidth = borderDiv.css("border-width");
			borderDiv.css("left", "-"+borderWidth);
			borderDiv.css("top", "-"+borderWidth);

			$(this).append(borderDiv);
			$(this).on("mouseover", function(){
				borderDiv.stop().animate({ 
					left:0, 
					top:0,
					width:"-="+(parseInt(borderWidth,10)*2)+"px",
					height:"-="+(parseInt(borderWidth,10)*2)+"px",
				}, options.time, options.easing);
			});
			$(this).on("mouseout", function(){
				borderDiv.stop().animate({ 
					left 	: "-"+borderWidth, 
					top 	: "-"+borderWidth,
					width 	: $(this).width(),
					height 	: $(this).height()
				}, options.time, options.easing);
			});
		});
    }
})(jQuery)