Plugins
Home

The plugins site is currently in development.

We've been looking to provide a higher-quality, spam-free experience at the plugins site for some time, and a major error on our part forced us to shut down the current site before we could put the new one in place. We are developing a new site, and you can follow along with its development on GitHub. For more information about this transition, including steps you can take as a plugin author to prepare, please read our post about what's going on.

Hover


Spitloot Tooltips

Submitted by jakelauer on September 16, 2010 - 11:58pm

This is a very simple, very lightweight plug-in for creating tooltips. Spitloot Tooltips uses inline HTML that is hidden and uses it as the tooltip when called.

hoverTimer

Submitted by dylan.lawrence on July 27, 2010 - 6:57pm

hoverTimer

hoverTimer is an object oriented timer that waits for a specified amount of time to pass to prior to calling the "mouseover" and "mouseout" events, also timing each events adding triggers to an update event that can be used as a listener. It also maintains the timer objects in a group to allow control over other still active objects.

Animate Hover

Submitted by nbaruna on July 21, 2010 - 1:29am

your button will be animate (fading) to it's hover state

Color Fade

Submitted by edwardhotchkiss on July 19, 2010 - 2:04am

Color fading rollovers for links or any object with overwrite-able options. Very trim w/ small file size.

jEffects

Submitted by rezoner on June 19, 2010 - 6:59pm

jEffects enhances user interaction by providing decorative effects. It’s all packaged into an intuitive jQuery plugin. It creates fireballs, bubbles, snow and stuff.

Please see the live preview to get a better idea of what it offers.

jQuery isHovered

Submitted by chadsmith on June 11, 2010 - 7:01pm

Summary

A jQuery plugin to test if an element is currently hovered.

Author

Chad Smith (email)

Requires

Download

jquery-ishovered.js (729 bytes)

License

Dual licensed under the MIT and GPL licenses.

Usage

Test if an element is hovered using:

$(selector).isHovered();

Or:

hoverFade

Submitted by danwellman on June 4, 2010 - 3:16pm

hoverFade 1.0.2

hoverFade has been updated with additional configuration options. All config options are now as follows:

  • newClass: "hover-anims", //class to add to element
  • classToRemove: "hover-css", //class to remove from element
  • onClass: "on", //class to ignore hovers on
  • trigger: "a", //element that triggers anims
  • faderTemplate: "", //element to add for anims
  • animSpeed: "normal", //speed of animations
  • exclude: "", //selector for elements to not animate
  • ignoreSiblings: "", //selector to ignore sibling elements
  • retainHoverOn: "" //class name to keep anims on when hovered

See the updated post here for more information (now with examples).

jQuery Twister

Submitted by andyhite on June 2, 2010 - 6:56pm

jQuery Twister is a simple plugin that adds a "twist" effect to images when you hover over them.

JQUERY.EVENT.HOVER

Submitted by justinbmeyer on May 27, 2010 - 10:01am

Hover provides delegate-able and customizable hover events for jQuery.

A hover event happens when a user moves their mouse within a customizable pixel radius within a customizable time.

Example

// listen for hover on 'option's in a menu
$('#menu').delegate(".option","hoverenter",function(){
  $(this).addClass("hovering");
})
// when the mouse leaves restore
.delegate(".option","hoverleave",function(){
  $(this).removeClass("hovering");
})

This plugin creates:

  • $.Hover
  • $.event.special.hoverenter
  • $.event.special.hoverleave
  • $.event.special.hoverinit
  • $.event.special.hovermove

This plugin is extracted from JavaScriptMVC and maintained by Jupiter JavaScript Consulting.

Frame Animation Plugin for jQuery

Submitted by bmartinec on May 24, 2010 - 7:42am

I wrote this plugin since it is a very simple and effective way to have nice and complex animations (with mouseover triggering) on your site without the use of Flash or Silverlight or anything similar. I got inspired for the plugin from the header logo at www.southparkstudios.com.

It's very simple to use provided that you have an image of several images (frames) vertically joined together (like a filmstrip).

Then you simply call $('#myElement').frameAnimation({delay:30});
and by default you get hover (mouseover/mouseout) functionality that triggers animation on mouseoever in one direction and on mouseout in the other. Delay parameter sets the timeout between frames, essentially changing framerate. By default it is set to 50 (ms), but you will probably have to set your own, because it really depends on the total number of frames that you have, length of animation and more importantly what looks good to you.