A jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object.
JavaScript
Latest commit ad3d032 Nov 23, 2009 Scott Robbin Checks to see if opacity is supported by the browser (IE). If not, at…
…tempts to user filter:alpha(opacity=xx) instead.
Permalink
Failed to load latest commit information.
demo
lib
GPL-LICENSE.txt Initial commit Oct 14, 2009
MIT-LICENSE.txt
README.textile Checks to see if opacity is supported by the browser (IE). If not, at… Nov 23, 2009
jquery.approach.js
jquery.approach.min.js Checks to see if opacity is supported by the browser (IE). If not, at… Nov 23, 2009

README.textile

jQuery Approach

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.

Demo

See the demo/demo.html and demo/demo2.html files for a demonstration of how jQuery Approach works
or view a live demo.

Note: demo/demo2.html does not work in older versions of IE that don’t support “opacity.”

Options

styles

Which styles you’d like to animate. Accepts the same syntax and properties as jQuery animate. Also, if you have the jQuery UI Core Effects installed,
it will also accept color-based properties. (type=Object, default=None)

distance

Set the minimum radial distance where you’d like the animation to begin (type=integer, default=400)

Setup

Include the jQuery library and Approach plugin files in your webpage tag (preferably at the bottom of the page, before the closing BODY tag):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/jquery.approach-1.0.min.js"></script>

Note: The example above uses the Google hosted version of jQuery; there is also a jQuery source file included with this distribution, if you would like to host it yourself.
Note #2: If you are using color animations, you must also include the jQuery UI Effects Core source code (also included in this distribution).

Next, add the following javascript code (where my_object is replace with the object(s) you’d like to approach/animate, whatever style properties you fancy, and a minimum distance):

<script type="text/javascript">
  $("#my_object").pageSlide({
    "fontSize": "48px"
  }, 200);
</script>

Support

Please file a ticket on our Github issues tracker.

Changelog

1.01

  • Checks to see if opacity is supported by the browser (IE). If not, attempts to user filter:alpha(opacity=xx) instead.