jq.entry

Determine mousemove directions

Download

Overview

Lightweight and cross-browser jQuery plugin to determine which side cursor enter or leave the element.

Sample

Hover me
Hover me
Hover me
Hover me
hover me

Download

You can download the source code from Github.

Implementation

Insert jQuery.js and jq.entry.js right before closing </head> tag. 

<script src="scripts/lib/jquery-1.9.1.min.js"></script>
<script src="scripts/jq.entry.min.js"></script>

How to use

If you want to use the simplest is as follows. 

$(function(){

	$('#elem').hover(function( event ){

		var direction = $(this).entry({ e : event });
		console.log( 'Enter direction: ' + direction );

	}, function( event ){

		var direction = $(this).entry({ e : event });
		console.log( 'Leave direction: ' + direction );

	});
})

Caution !

Padding inside element can break down the definition, try avoid using of paddings. Example of possible solution may be found below.

Options

Some options you can change

Key Comment
invert

(bool) Inverts direction

Default: false

sides

(array) Name of border directions, grouped in css alike sequence.

Default: [ 'up', 'right', 'down', 'left' ]

May be useful for custom hover effects

Example: jq.entry + jQuery UI slide effect. Check source code of this at jsFiddle.

Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample
Custom hover effect
image-sample

Capable browsers

License

The MIT License

If you've found a bug, etc.

Please pull request to fork a github repository, if possible. I might be able to correspond to the time when there is a difficult case and get written on issues, someone may be able to support.

Regards use at your own risk!

Author

Denis Lukov - https://github.com/NeXTs

Thank you