jQuery border inset plugin

jQuery border inset plugin

Hi,
I'm using the jQuery inset border plugin:  http://css-tricks.com/inset-border-effect/
I'd like to reverse the effect of the plugin so that borders move inwards on hover. I've managed to achieve this but the border is still visible on load of the browser window, I'd like it to be initially invisible.

Please could someone show me to do this? Code is:

(function($) {
$.fn.insetBorder = function(options) {
if ((options!=undefined) && (options.inset!=undefined))
{
if (options.insetleft==undefined) { options.insetleft = options.inset; }
if (options.insetright==undefined) { options.insetright = options.inset; }
if (options.insettop==undefined) { options.insettop = options.inset; }
if (options.insetbottom==undefined) { options.insetbottom = options.inset; }
}
// defaults
options = $.extend({
speed : 250,
insetleft : 10,
insetright : 10,
insettop : 10,
insetbottom : 10,
borderColor : '#ffffff',
borderType: "solid",
outerClass : "ibe_outer",
innerClass : "ibe_inner"
}, options);
// run plugin on entire jQuery set
return this.each(function(i)
{
      var
  $el = $(this),
  ibe_height = $el.outerHeight(),
 ibe_width = $el.outerWidth();
  var
 wrapper = $("<div />", {
   "class": options.outerClass,
   "css"  : {
    "width": ibe_width,
    "height": ibe_height,
    "overflow": "hidden",
    "top": 0,
    "left": 0,
    "position": "relative"
  },
     "mouseenter": function() {
     $el
     
 
.next()
 
 
    .animate({
      "height": (ibe_height - (options.insettop + options.insetbottom)) + "px", 
      "width": (ibe_width - (options.insetleft + options.insetright)) + "px", 
   "top": 0, 
      "left": 0, 
 
      
      "opacity": 1
    }, {
      "duration": options.speed, 
      "queue": false,
      "complete": function() {
      
        // BUG: for some reason this is getting called twice.
        
        // Kinda works... attempt at allowing selectability of main element
        // The problem is this only fires on complete but must make visibile on mouseleave no matter what
        // $el.next().css("visibility", "hidden");
        
      }
    });
   
   // on mouseleave
  },
  "mouseleave": function() {
   
   $el
 
      .next()
      // .css({
      //  "visibility": "visible"
      // })
    .animate({
     
"top": "-" + options.insettop + "px", 
      "left": "-" + options.insetleft + "px",  
      "height": ibe_height, 
      "width": ibe_width, 
      "opacity": 1
    }, {
     "duration": options.speed, 
     "queue": false
   });
   
  } 
  }),
  
after = $("<div />", {
   "class": options.innerClass,
   "css"  : {
    "height": (ibe_height - (options.insettop + options.insetbottom)) + "px",
    "width": (ibe_width - (options.insetleft + options.insetright)) + "px",
    "border-left": options.insetleft + "px " + options.borderType + " " + options.borderColor,
    "border-right": options.insetright + "px " + options.borderType + " " + options.borderColor,
    "border-top": options.insettop + "px " + options.borderType + " " + options.borderColor,
    "border-bottom": options.insetbottom + "px " + options.borderType + " " + options.borderColor,
    "position": "absolute",
    "top": 0,
    "left": 0
   }
  });

$el.wrap(wrapper).after(after);
 
});
};
})(jQuery);



Many thanks :)
M