Jquery Fade In as mouse gets closer to element

Question

I am looking for an effect such that when I move my mouse closer to an element, that element goes from 0 opacity (invisible) to 100 opacity.

I am not looking for the typical mouseover/mouseout combination.

The opacity should be dependent on the distance the mouse is from the element. The opacity would increase within a 100px boundary around the element until the mouse gets to the element. Then it would be 100 opacity.

Is there any plugin out there that does something similar to this?

Answer 1

Yes, Approach is a plugin which does exactly what you describe,

Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time.

The second demo on the main page in particular sounds relevant to you.