https://kkjz.org/js/global/hover-aware2.js

1(function( $, undefined ) {
2		
3	/*
4	 * HoverDir object.
5	 */
6	$.HoverDir 				= function( options, element ) {
7	
8		this.$el	= $( element );
9		
10		this._init( options );
11		
12	};
13	
14	$.HoverDir.defaults 	= {
15		hoverDelay	: 0,
16		reverse		: false
17	};
18	
19	$.HoverDir.prototype 	= {
20		_init 				: function( options ) {
21			
22			this.options 		= $.extend( true, {}, $.HoverDir.defaults, options );
23			
24			// load the events
25			this._loadEvents();
26			
27		},
28		_loadEvents			: function() {
29			
30			var _self = this;
31			
32			this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
33				
34				var $el			= $(this),
35					evType		= event.type,
36					$hoverElem	= $el.find( 'div' ),
37					direction	= _self._getDir( $el, { x : event.pageX, y : event.pageY } ),
38					cssPos    =   _self._getPosition( direction, $el );
39				
40				
41				if( evType === 'mouseenter' ) {
42
43					$hoverElem.css( { "left" : cssPos.from, "top" : cssPos.to } );
44					
45					clearTimeout( _self.tmhover );
46					
47					_self.tmhover	= setTimeout( function() {
48						
49						$hoverElem.show( 0, function() {
50							$(this).stop().animate( { "top" : 0, "left" : 0 } , 300 );
51						} );
52						
53					
54					}, _self.options.hoverDelay );
55					
56				}
57				else {
58				
59					$hoverElem.stop().animate( { "left" : cssPos.from, "top" : cssPos.to }, 300, function(){
60                                            $hoverElem.hide();
61                                        } );
62					
63					clearTimeout( _self.tmhover );
64					
65				}
66					
67			} );
68			
69		},
70		_getDir				: function( $el, coordinates ) {
71			
72				/** the width and height of the current div **/
73			var w = $el.width(),
74				h = $el.height(),
75
76				/** calculate the x and y to get an angle to the center of the div from that x and y. **/
77				/** gets the x value relative to the center of the DIV and "normalize" it **/
78				x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
79				y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
80			
81				/** the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);**/
82				/** first calculate the angle of the point, 
83				add 180 deg to get rid of the negative values
84				divide by 90 to get the quadrant
85				add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
86				direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
87			
88			return direction;
89			
90		},
91		_getPosition			: function( direction, $el ) {
92			
93			var fromLeft, fromTop;
94			
95			switch( direction ) {
96				case 0:
97					// from top
98					if ( !this.options.reverse ) { fromLeft = 0, fromTop = - $el.height() }
99                                        else {  fromLeft = 0, fromTop = - $el.height()  }
100					
101					break;
102				case 1:
103					// from right
104					if ( !this.options.reverse ) { fromLeft = $el.width()  , fromTop = 0}
105                                        else {  fromLeft = - $el.width() , fromTop = 0 }
106					break;
107				case 2:
108					// from bottom
109					if ( !this.options.reverse ) { fromLeft = 0 , fromTop = $el.height() }
110                                        else {  fromLeft = 0, fromTop = - $el.height()  }
111					break;
112				case 3:
113					// from left
114					if ( !this.options.reverse ) {fromLeft = -$el.width()  , fromTop = 0}
115                                        else {  fromLeft =  $el.width(), fromTop = 0 }
116					break;
117			};
118			
119			return { from : fromLeft, to: fromTop };
120					
121		}
122	};
123	
124	var logError 			= function( message ) {
125	};
126	
127	$.fn.hoverdir			= function( options ) {
128	
129		if ( typeof options === 'string' ) {
130			
131			var args = Array.prototype.slice.call( arguments, 1 );
132			
133			this.each(function() {
134			
135				var instance = $.data( this, 'hoverdir' );
136				
137				if ( !instance ) {
138					logError( "cannot call methods on hoverdir prior to initialization; " +
139					"attempted to call method '" + options + "'" );
140					return;
141				}
142				
143				if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
144					logError( "no such method '" + options + "' for hoverdir instance" );
145					return;
146				}
147				
148				instance[ options ].apply( instance, args );
149			
150			});
151		
152		} 
153		else {
154		
155			this.each(function() {
156			
157				var instance = $.data( this, 'hoverdir' );
158				if ( !instance ) {
159					$.data( this, 'hoverdir', new $.HoverDir( options, this ) );
160				}
161			});
162		
163		}
164		
165		return this;
166		

167	};
168	
169})( jQuery );