Jquery Fade In as mouse gets closer to element

I am looking for an effect such that when I move my mouse closer to a开发者_JAVA技巧n 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?

---

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.