JAVASCRIPT   82

jquery hoverdir js

Guest on 27th June 2022 04:11:56 PM

  1. /**
  2.  * jquery.hoverdir.js v1.1.0
  3.  * http://www.codrops.com
  4.  *
  5.  * Licensed under the MIT license.
  6.  * http://www.opensource.org/licenses/mit-license.php
  7.  *
  8.  * Copyright  Codrops
  9.  * http://www.codrops.com
  10.  */
  11. ;( function( $, window, undefined ) {
  12.        
  13.         'use strict';
  14.  
  15.         $.HoverDir = function( options, element ) {
  16.                
  17.                 this.$el = $( element );
  18.                 this._init( options );
  19.  
  20.         };
  21.  
  22.         // the options
  23.         $.HoverDir.defaults = {
  24.                 speed : 300,
  25.                 easing : 'ease',
  26.                 hoverDelay : 0,
  27.                 inverse : false
  28.         };
  29.  
  30.         $.HoverDir.prototype = {
  31.  
  32.                 _init : function( options ) {
  33.                        
  34.                         // options
  35.                         this.options = $.extend( true, {}, $.HoverDir.defaults, options );
  36.                         // transition properties
  37.                         this.transitionProp = 'all ' + this.options.speed + 'ms ' + this.options.easing;
  38.                         // support for CSS transitions
  39.                         this.support = window.Modernizr ? Modernizr.csstransitions : false;
  40.                         // load the events
  41.                         this._loadEvents();
  42.  
  43.                 },
  44.                 _loadEvents : function() {
  45.  
  46.                         var self = this;
  47.                        
  48.                         this.$el.on( 'mouseenter.hoverdir, mouseleave.hoverdir', function( event ) {
  49.                                
  50.                                 var $el = $( this ),
  51.                                         $hoverElem = $el.find( '.folioShowBlock' ),
  52.                                         direction = self._getDir( $el, { x : event.pageX, y : event.pageY } ),
  53.                                         styleCSS = self._getStyle( direction );
  54.                                
  55.                                 if( event.type === 'mouseenter' ) {
  56.                                        
  57.                                         $hoverElem.hide().css( styleCSS.from );
  58.                                         clearTimeout( self.tmhover );
  59.  
  60.                                         self.tmhover = setTimeout( function() {
  61.                                                
  62.                                                 $hoverElem.show( 0, function() {
  63.                                                        
  64.                                                         var $el = $( this );
  65.                                                         if( self.support ) {
  66.                                                                 $el.css( 'transition', self.transitionProp );
  67.                                                         }
  68.                                                         self._applyAnimation( $el, styleCSS.to, self.options.speed );
  69.  
  70.                                                 } );
  71.                                                
  72.                                        
  73.                                         }, self.options.hoverDelay );
  74.                                        
  75.                                 }
  76.                                 else {
  77.                                
  78.                                         if( self.support ) {
  79.                                                 $hoverElem.css( 'transition', self.transitionProp );
  80.                                         }
  81.                                         clearTimeout( self.tmhover );
  82.                                         self._applyAnimation( $hoverElem, styleCSS.from, self.options.speed );
  83.                                        
  84.                                 }
  85.                                        
  86.                         } );
  87.  
  88.                 },
  89.                 // credits : http://stackoverflow.com/a/3647634
  90.                 _getDir : function( $el, coordinates ) {
  91.                        
  92.                         // the width and height of the current div
  93.                         var w = $el.width(),
  94.                                 h = $el.height(),
  95.  
  96.                                 // calculate the x and y to get an angle to the center of the div from that x and y.
  97.                                 // gets the x value relative to the center of the DIV and "normalize" it
  98.                                 x = ( coordinates.x - $el.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
  99.                                 y = ( coordinates.y - $el.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
  100.                        
  101.                                 // the angle and the direction from where the mouse came in/went out clockwise (TRBL=0123);
  102.                                 // first calculate the angle of the point,
  103.                                 // add 180 deg to get rid of the negative values
  104.                                 // divide by 90 to get the quadrant
  105.                                 // add 3 and do a modulo by 4  to shift the quadrants to a proper clockwise TRBL (top/right/bottom/left) **/
  106.                                 direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 ) % 4;
  107.                        
  108.                         return direction;
  109.                        
  110.                 },
  111.                 _getStyle : function( direction ) {
  112.                        
  113.                         var fromStyle, toStyle,
  114.                                 slideFromTop = { left : '0px', top : '-100%' },
  115.                                 slideFromBottom = { left : '0px', top : '100%' },
  116.                                 slideFromLeft = { left : '-100%', top : '0px' },
  117.                                 slideFromRight = { left : '100%', top : '0px' },
  118.                                 slideTop = { top : '0px' },
  119.                                 slideLeft = { left : '0px' };
  120.                        
  121.                         switch( direction ) {
  122.                                 case 0:
  123.                                         // from top
  124.                                         fromStyle = !this.options.inverse ? slideFromTop : slideFromBottom;
  125.                                         toStyle = slideTop;
  126.                                         break;
  127.                                 case 1:
  128.                                         // from right
  129.                                         fromStyle = !this.options.inverse ? slideFromRight : slideFromLeft;
  130.                                         toStyle = slideLeft;
  131.                                         break;
  132.                                 case 2:
  133.                                         // from bottom
  134.                                         fromStyle = !this.options.inverse ? slideFromBottom : slideFromTop;
  135.                                         toStyle = slideTop;
  136.                                         break;
  137.                                 case 3:
  138.                                         // from left
  139.                                         fromStyle = !this.options.inverse ? slideFromLeft : slideFromRight;
  140.                                         toStyle = slideLeft;
  141.                                         break;
  142.                         };
  143.                        
  144.                         return { from : fromStyle, to : toStyle };
  145.                                        
  146.                 },
  147.                 // apply a transition or fallback to jquery animate based on Modernizr.csstransitions support
  148.                 _applyAnimation : function( el, styleCSS, speed ) {
  149.  
  150.                         $.fn.applyStyle = this.support ? $.fn.css : $.fn.animate;
  151.                         el.stop().applyStyle( styleCSS, $.extend( true, [], { duration : speed + 'ms' } ) );
  152.  
  153.                 },
  154.  
  155.         };
  156.        
  157.         var logError = function( message ) {
  158.  
  159.                 if ( window.console ) {
  160.  
  161.                         window.console.error( message );
  162.                
  163.                 }
  164.  
  165.         };
  166.        
  167.         $.fn.hoverdir = function( options ) {
  168.  
  169.                 var instance = $.data( this, 'hoverdir' );
  170.                
  171.                 if ( typeof options === 'string' ) {
  172.                        
  173.                         var args = Array.prototype.slice.call( arguments, 1 );
  174.                        
  175.                         this.each(function() {
  176.                        
  177.                                 if ( !instance ) {
  178.  
  179.                                         logError( "cannot call methods on hoverdir prior to initialization; " +
  180.                                         "attempted to call method '" + options + "'" );
  181.                                         return;
  182.                                
  183.                                 }
  184.                                
  185.                                 if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
  186.  
  187.                                         logError( "no such method '" + options + "' for hoverdir instance" );
  188.                                         return;
  189.                                
  190.                                 }
  191.                                
  192.                                 instance[ options ].apply( instance, args );
  193.                        
  194.                         });
  195.                
  196.                 }
  197.                 else {
  198.                
  199.                         this.each(function() {
  200.                                
  201.                                 if ( instance ) {
  202.  
  203.                                         instance._init();
  204.                                
  205.                                 }
  206.                                 else {
  207.  
  208.                                         instance = $.data( this, 'hoverdir', new $.HoverDir( options, this ) );
  209.                                
  210.                                 }
  211.  
  212.                         });
  213.                
  214.                 }
  215.                
  216.                 return instance;
  217.                
  218.         };
  219.        
  220. } )( jQuery, window );

Raw Paste

Login or Register to edit or fork this paste. It's free.