A jquery plugin to create animated borders on hover
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
demo
js
README.markdown
index.html

README.markdown

jQueryNiftyBorders

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.

Developers

Usage

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.

Options

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 ("nb_container"): the class that is assigned to a new div that will be created to surround and mask the selected DOM element
  • bordersClass ("nb_borders"): 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

License

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).

Thankyou for being interested on this project ! ;)