jQueryNiftyBorders is a simple jQuery plugin that makes easy to create some nifty border animations while hovering on DOM elements such as images or divs. It has been inspired by the wonderful work of Robin Thrift and Chris Coyier, the “inset border effect jQuery plugin”.
State of the art
The plugin has been developed in a few hours and actually it has been only superficially tested. We only realized a demo page where everything seems to work but, we know, a deeper testing session should be done to gain more reliability. So currently we must discourage the production environment usage. We decided to push this early version of plugin on github just because we believe on the github community power. If you’re a jQuery guru and you like this project don’t hesitate to fork the project or to send us some suggestion to make it better and better.
Like most jQuery plugins you have to chain the specific plugin function to a jQuery selector to apply the plugin behavior to the selected elements. In this case you can simply call:
$("yourSelector").niftyBorders( options );
The list of all the available options is provided below.
Here’s a list of all the available options. The default value is in brackets.
speed(“fast”): The speed of the animation of the borders. You can use the default string values “slow”, “medium” or “fast” constants or an integer that indicates the duration in ms of the animation.
easing(“swing”): The animation easing function
borderTickness(0): the default tickness of the borders (in pixel)
borderColor(“#fff”): the border color
borderOpacity(1): the default opacity of the borders (from 0.0 to 1.0)
borderType(“solid”): the type of borders. Eg. “solid”, “dotted”,”double”, “inset”, etc…
borderHoverTickness(10): the tickness of the border when the mouse cursor is over the element
borderHoverOpacity(1): the opacity of the border when the mouse cursor is over the element
containerClass(“nbcontainer”_): the class that is assigned to a new div that will be created to surround and mask the selected DOM element
bordersClass(“nbborders”_): the class that is assigned to a div created to draw the borders
onMouseEnter($.noop): a callback function that will be called on mouse enter (mouse cursor over the element)
onMouseLeave($.noop): a callback function that will be called on mouse leave
You are free to use this plug in in any way you want non-commercially and commercially. However if you redistribute (even when altered by you) you have to give credit to the developers by linking the original github page of the project.
What the hell! This is not english! This is “Macaroni English” !!!
We, the developers, are both Italian guys. Our english knowledge is just “scolastic”, so our english is really far from perfection. Please be quite if this documents is not correct. We just hope that it’s clear enough! If your english is better than ours (surely it is), please feel free to send us some suggestion to improve the whole plugin documentation: you’ll be officially rewarded with a beer (maybe a virtual one, but that’s just a detail :P).