Blog

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.

Download

Version 1.0 (released 21/05/10)    jquery.resizeOnApproach.1.0.zip

Using the Plugin

To use the plugin use the following code

$('.imgToAffect').resizeOnApproach(settings);

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

<script>// <![CDATA[
$(document).ready(function(){
        $('.mac-dock img').resizeOnApproach();
        });
// ]]></script>
<div style="position: relative; height: 130px; border: solid;">
<div class="mac-dock"></div>
style="text-align:center;
position:absolute;
bottom:30px;width:100%;"&gt;
<img src="icon1.png" alt="" />
<img src="icon2.png" alt="" />
<img src="icon3.png" alt="" />
<img src="icon4.png" alt="" />
<img src="icon5.png" alt="" />
<img src="icon6.png" alt="" /></div>

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!