I recently updated my hoverFade jQuery plugin after using the plugin in a couple of projects and work and needing extra functionality. I’ve been waiting for the jQuery plugin site to come back up again (which it now has) after being locked down following major spam attacks. I also wanted to wait until I had chance to put some proper examples together following comments in the original plugin release post (which can be seen here).
Ok, so I finally had time to put an example page together. I’ll try and get some additional ones up soon, and keep it updated inline with the plugin…
The plugin is designed to be used with navigation menus, where each menu item is made from an anchor element within a list-item element. You can apply the effect to different collections of elements by supplying new trigger and faderTemplate options (see the Configurable Options section below).
- First you should set up standard CSS hover states from the elements you want to add the effect to. This should be done using a class name on the container of the fading elements. This is so that basic CSS hovers are still used if JS is disabled on the client.
- Add selectors that show the same background image as the CSS hovers using a different class name. This different class name will be applied to the container and the CSS class name will be removed.
- Link to the plugin file from (ideally) the bottom of the page, after linking first to jQuery
- Call the plugin method on the same element that the CSS class was added to. if you use the default class names used by the plugin, and call the plugin on a standard list of links the plugin should just work.
There are 9 user-configurable options that can be set, which are listed in the next section
The latest version of hoverFade has the following configuration options:
- newClass: the new class to add, defaults to “hover-anims”
- classToRemove: the existing class to remove, defaults to “hover-css”
- onClass: class name to add to show a link as on, defaults to “on”
- trigger: the target element that will trigger the animation, defaults to “a”
- faderTemplate: the element to be used to show the animation, defaults to “<span />”
- animSpeed NEW!: the speed of the animation, defaults to “normal”
- exclude NEW!: a jQuery selector that should not have an animation state added to it, deaults to “”
- ignoreSiblings NEW!: a jQuery selector that should not be animated, defaults to “”
- retainHoverOn NEW!: a class name for elements that should not fade out on mouseleave, defaults to “”
The exclude is very similar to the on option except that the element with the on class name will have the animated state on show permanently, while any elements exluded from the animations with exclude will not have the animated state shown ever.
The ignoreSiblings option is useful for when the element that will have the animations applied to already has a <span> element within it.
The retainHoverOn is useful for when you have another element inside the trigger element that causes something else to happen, a popup to appear for example, and you’d like the animated hover state to remain on even when the pointer moves into the other element