Direction aware Hover effect

gistfile1.js

(function(b,c){b.HoverDir=function(d,e){this.$el=b(e);this._init(d)};b.HoverDir.defaults={hoverDelay:0,reverse:false};b.HoverDir.prototype={_init:function(d){this.options=b.extend(true,{},b.HoverDir.defaults,d);this._loadEvents()},_loadEvents:function(){var d=this;this.$el.on("mouseenter.hoverdir, mouseleave.hoverdir",function(i){var g=b(this),h=i.type,e=g.find("div"),j=d._getDir(g,{x:i.pageX,y:i.pageY}),f=d._getClasses(j);e.removeClass();if(h==="mouseenter"){e.hide().addClass(f.from);clearTimeout(d.tmhover);d.tmhover=setTimeout(function(){e.show(0,function(){b(this).addClass("da-animate").addClass(f.to)})},d.options.hoverDelay)}else{e.addClass("da-animate");clearTimeout(d.tmhover);e.addClass(f.from)}})},_getDir:function(f,j){var e=f.width(),g=f.height(),d=(j.x-f.offset().left-(e/2))*(e>g?(g/e):1),k=(j.y-f.offset().top-(g/2))*(g>e?(e/g):1),i=Math.round((((Math.atan2(k,d)*(180/Math.PI))+180)/90)+3)%4;return i},_getClasses:function(e){var f,d;switch(e){case 0:(!this.options.reverse)?f="da-slideFromTop":f="da-slideFromBottom";d="da-slideTop";break;case 1:(!this.options.reverse)?f="da-slideFromRight":f="da-slideFromLeft";d="da-slideLeft";break;case 2:(!this.options.reverse)?f="da-slideFromBottom":f="da-slideFromTop";d="da-slideTop";break;case 3:(!this.options.reverse)?f="da-slideFromLeft":f="da-slideFromRight";d="da-slideLeft";break}return{from:f,to:d}}};var a=function(d){if(this.console){console.error(d)}};b.fn.hoverdir=function(e){if(typeof e==="string"){var d=Array.prototype.slice.call(arguments,1);this.each(function(){var f=b.data(this,"hoverdir");if(!f){a("cannot call methods on hoverdir prior to initialization; attempted to call method '"+e+"'");return}if(!b.isFunction(f[e])||e.charAt(0)==="_"){a("no such method '"+e+"' for hoverdir instance");return}f[e].apply(f,d)})}else{this.each(function(){var f=b.data(this,"hoverdir");if(!f){b.data(this,"hoverdir",new b.HoverDir(e,this))}})}return this}})(jQuery);


$(function() {
	$('#da-thumbs > li').hoverdir();
	$('a div').addClass('da-slideFromLeft da-slideLeft da-animate')
});

$(window).load(function(){
	setTimeout(function(){
		$('a div').removeClass(' da-slideLeft');
	}, 1700);
})


http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/