A repository of over 1000 quality jQuery plugins

jQuery jQuery Aim

jQuery Aim is a jQuery Hover plugin.

Created by Cihadturhan

jQuery plugin which guesses which element user is going to be hovered/clicked.

Not what you're looking for? Click here to view more Hover jQuery plugins

jquery.aim

jQuery plugin anticipates on which element user is going to hover/click.

test

Examples

A couple of examples can be found the examples page

Usage

Call the function on the elements to catch user aim and add a class which will be added or removed when aiming starts or ends

$('#target').aim({
    className: 'open'
});

If you want to execute a function on aim starts or ends, use the aimEnter and aimExit options

$('#hamburger').aim({

    aimEnter: function() {
        $('#menu').show();
    },

    aimExit: function(){
        $('#menu').hide();
    }
});

Debugging

To see where your cursor is aiming and check if it intersects with elements use

$.aim.setDebug(true);

and you will see a rectangle moving around.

Defining own function

If you don't like the default algorithm, define your own by the following procedure


function anticipateFunc(p, v, mouseX, mouseY, anticipator) {
  /*
  Calculate the new position of anticipator using inputs
  p = {x:number,y:number}
  v = {x:number,y:number}
  mouseX = number
  mouseY = number

  Anticipator has some readonly values like the following

  {
      size: 50,
      center: {x: 0, y: 0},
      effectiveSize: 1,
      rect : {x0: 0, y0: 0, x1: 50, y1: 50}
  }

  */
}

$.aim.setAnticipateFunction(anticipateFunc);


You might also like these other Hover jQuery Plugins

  • JQuery TouchMenuHover

    Allows ULs (or any element of your choice) that open on li:hover to open on tap/click on mobile platforms such as iOS, Android, WP7 etc

  • JQuery GreyScale Plugin

    A plugin for jQuery convert images to grayscale on the fly and reveal the coloured version on hover

  • JQuery Tooltip Plugin

    A simple hover tooltip