Sometimes it’s the little things that make the difference in user interfaces. A seemingly minor change can have a massive effect on the look and feel.
It is easy in jQuery to make an object expand in size on hover: simply attach an animate effect to a hover event. However, this doesn’t result in a nice effect. The hover feels clunky awkward. Instead I wanted the icons to expand to meet the mouse as I moved towards it, giving a nice smooth effect.
So I did the obvious thing and wrote a plugin!
This plugin measures the distance between the mouse pointer and the expanding element. If the mouse is closer to the image than a certain trigger distance, the image will expand by an amount related to the distance between the mouse and the element, creating a nice expanding effect.
When working on one image, this plugin is not very impressive, but when applied to multiple images, the effect really shines. Here for example I have used the plugin to create a apple OSX style dock bar.
To get the elements to align with the bottom, I have put all the images in a div that is absolutely positioned using the bottom attribute.
Version 1.0 (released 21/05/10) jquery.resizeOnApproach.1.0.zip
Using the Plugin
To use the plugin use the following code
where settings is a map of the following properties
- elementDefault (default 35) : the default size to set the element the effect is applied to.
- elementClosest (default 55) : the maximum size the element will expand to.
- triggerDistance: (default 200) : the distance from the mouse at which the image will start to resize.
Here is the code I used to create the apple style dock bar
If you want any more help using this plugin, please let me know and I’ll do my best to help – and any more requests for plugins, please let me know!
If you liked this article you might like to read the follow-up article, Nice link colour fades using jQuery.