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).
Examples
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…
Download
- Legacy version [1.4k]
- Version 1.0.2 unminified [2.21k]
- Version 1.0.2 minified [1.07k]
Usage
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
Configurable Options
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 “”
Notes
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
[...] This post was mentioned on Twitter by Dan Wellman, dsaportfolio. dsaportfolio said: RT @danwellman: #jQuery plugin hoverFade updated, with examples: http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/ enjoy :D [...]
I am posting here because your contact tab is not working for me……. I went to your Rigby site and the menu system across the top wasn’t working right for me. If i scrolled straight down the menu would disappear before it could hover over an item. I could only get it to stay if i scrolled down diagonally
Hi Joe, yeah, the contact tab is a bit flakey at the moment, just haven’t had time to update it. It works intermittently…
What browser were youy using on the Rigby site? It works perfectly for me on FF 3.6..?
I built the site originally, but it was built while I worked for MAD productions and I no longer work there so it’s possible someone else has updated it. There’s absolutely nothing I can do to fix it if it is broken however…
[...] HoverFade ( Demo | Download ) 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. [...]
[...] HoverFade ( Demo | Download ) 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. [...]
Very efficiently written article. It will be helpful to anybody who employess it, as well as me. Keep up the good work – for sure i will check out more posts.
[...] 7. HoverFade [...]
[...] jQuery jQuery Plugin – hoverFade [...]
[...] HoverFade ( Demo | Download ) The plugin is calculated 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. [...]
Dan Wellman » Plugin Update: hoverfade-1.0.2…
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….
Im very glad to listen to this. This is very nice :).
[...] Demo | Download | Home Page [...]
[...] hoverFade入手先:Dan Wellman [...]
Awesome Menu original that change from traditional one thnks for sharing your work you are an artist
[...] the metadata attribute settable on the extruder container.Stay-On-Top Menu ( Demo | Download ) HoverFade ( Demo | Download ) The plugin is designed to be used with navigation menus, where each menu item [...]
It must have put a lot of work to do this site.It is useful for me.
[...] / 配布元サイトはこちらです。 [...]
Awesome Menu original that change from traditional one thnks for sharing your work you are an artist
When I open up your Feed it appears to be a lot of garbage, is the problem on my part?
The feed is controlled by feedburner. I just checked and it looks ok to me. Are you using a reader or viewing the feed through a browser..?
[...] hoverFade入手先:Dan Wellman [...]
Great! thanks for plugin, I’ll use it in my current project.
Awesome this is really a great post and big help, i will use this plugin every where whenever required…hats off.
I’m stunned with this plugin project update, thanks for original menu wanted to have it!
[...] HoverFade ( Demo | Download ) [...]
amazing plugin apdate, thanks for share, it was helpful.!
[...] http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/ [...]
[...] 2は「http://www.danwellman.co.uk/plugin-update-hoverfade-1-0-2/」のページの 「Download」のリスト3番目の「Version 1.0.2 minified [1.07k]」からダウンロードしました。(2012年6月26日現在) [...]