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.

Download Now

Demo
Documentation
Development

Info

Current Version: 1.0
Compressed File Size: 3350 bytes
License: MIT/GPL

Example

If an object, Foo, has a starting opacity of 0.2 (set in the stylesheet), and the following code is used:

In the stylesheet:

    #foo { opacity: 0.2; }

In the document’s script tag:

    $("#foo").approach({
        opacity: 0.99
    }, 300);

As the cursor approaches Foo, and reaches the minimum radial distance (in this example, a threshold of 300px), Foo’s opacity will be animated to a value between 0.2 and 0.99, proportional to its distance from Foo.

Note: The plugin accepts any CSS property that is accepted by jQuery animate, and also accepts color-based parameters, if you are using the jQuery UI Effects Core.

Demos

A simple demo that animates both font-size and color.

$("a#demo-link").approach({
    "fontSize": "40px",
    "color": "#CC3300"
}, 200);

In this next demo, there are 40 circle images, each with a starting opacity of 0.2. jQuery Approach is attached to all of the circles, using a minimum radial distance of 100px, and animated to an opacity of 0.8 as the cursor approaches an object’s center.

Note: This demo only works in browsers that support the CSS style, opacity (not older versions of IE).

$("#wrap img").approach({
    "opacity": 0.8
}, 100);

Required

jQuery (min. 1.3.2 recommended)

Optional

jQuery UI Effects Core (if you’d like to animate using color)

Support

Please post all support requests or issues to GitHub. Additionally, if you’d like to join in on the development, contacting me via GitHub is recommended as well.