diff -r 000000000000 -r d970ebf37754 wp/wp-content/themes/IN-MOTION-package-u1/in-motion/js/jquery.iconmenu.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/wp/wp-content/themes/IN-MOTION-package-u1/in-motion/js/jquery.iconmenu.js Wed Nov 06 03:21:17 2013 +0000 @@ -0,0 +1,181 @@ +(function($) { + + var methods = { + init : function( options ) { + + if( this.length ) { + + var settings = { + // configuration for the mouseenter event + animMouseenter : { + 'mText' : {speed : 350, easing : 'easeOutExpo', delay : 140, dir : 1}, + 'sText' : {speed : 350, easing : 'easeOutExpo', delay : 0, dir : 1}, + 'icon' : {speed : 350, easing : 'easeOutExpo', delay : 280, dir : 1} + }, + // configuration for the mouseleave event + animMouseleave : { + 'mText' : {speed : 300, easing : 'easeInExpo', delay : 140, dir : 1}, + 'sText' : {speed : 300, easing : 'easeInExpo', delay : 280, dir : 1}, + 'icon' : {speed : 300, easing : 'easeInExpo', delay : 0, dir : 1} + }, + // speed for the item bg color animation + boxAnimSpeed : 300, + // default text color (same defined in the css) + defaultTextColor : '#3a3939', + defaultCircleHoverColor : '#383938', + // default bg color (same defined in the css) + defaultBgColor : '#fff' + }; + + return this.each(function() { + + // if options exist, lets merge them with our default settings + if ( options ) { + $.extend( settings, options ); + } + + var $el = $(this), + // the menu items + $menuItems = $el.children('li'), + // save max delay time for mouseleave anim parameters + maxdelay = Math.max( settings.animMouseleave['mText'].speed + settings.animMouseleave['mText'].delay , + settings.animMouseleave['sText'].speed + settings.animMouseleave['sText'].delay , + settings.animMouseleave['icon'].speed + settings.animMouseleave['icon'].delay + ), + // timeout for the mouseenter event + // lets us move the mouse quickly over the items, + // without triggering the mouseenter event + t_mouseenter; + + // save default top values for the moving elements: + // the elements that animate inside each menu item + $menuItems.find('.sti-item').each(function() { + var $el = $(this); + $el.data('deftop', $el.position().top); + }); + + // ************** Events ************* + // mouseenter event for each menu item + $menuItems.bind('mouseenter', function(e) { + + clearTimeout(t_mouseenter); + + var $item = $(this), + $wrapper = $item.children('a'), + wrapper_h = $wrapper.height(), + // the elements that animate inside this menu item + $movingItems= $wrapper.find('.sti-item'), + // the color that the texts will have on hover + hovercolor = $item.data('hovercolor'); + + t_mouseenter = setTimeout(function() { + // indicates the item is on hover state + $item.addClass('sti-current'); + + $movingItems.each(function(i) { + var $item = $(this), + item_sti_type = $item.data('type'), + speed = settings.animMouseenter[item_sti_type].speed, + easing = settings.animMouseenter[item_sti_type].easing, + delay = settings.animMouseenter[item_sti_type].delay, + dir = settings.animMouseenter[item_sti_type].dir, + // if dir is 1 the item moves downwards + // if -1 then upwards + style = {'top' : -dir * wrapper_h + 'px'}; + + if( item_sti_type === 'icon' ) { + // this sets another bg image for the icon + style.backgroundPosition = 'bottom left'; + } else { + style.color = hovercolor; + } + // we hide the icon, move it up or down, and then show it + $item.hide().css(style).show(); + clearTimeout($item.data('time_anim')); + $item.data('time_anim', + setTimeout(function() { + // now animate each item to its default tops + // each item will animate with a delay specified in the options + $item.stop(true) + .animate({top : $item.data('deftop') + 'px'}, speed, easing); + }, delay) + ); + }); + // animate the bg color of the item + $wrapper.stop(true).animate({ + backgroundColor: settings.defaultCircleHoverColor + }, settings.boxAnimSpeed ); + + }, 100); + + }) + // mouseleave event for each menu item + .bind('mouseleave', function(e) { + + clearTimeout(t_mouseenter); + + var $item = $(this), + $wrapper = $item.children('a'), + wrapper_h = $wrapper.height(), + $movingItems= $wrapper.find('.sti-item'); + + if(!$item.hasClass('sti-current')) + return false; + + $item.removeClass('sti-current'); + + $movingItems.each(function(i) { + var $item = $(this), + item_sti_type = $item.data('type'), + speed = settings.animMouseleave[item_sti_type].speed, + easing = settings.animMouseleave[item_sti_type].easing, + delay = settings.animMouseleave[item_sti_type].delay, + dir = settings.animMouseleave[item_sti_type].dir; + + clearTimeout($item.data('time_anim')); + + setTimeout(function() { + + $item.stop(true).animate({'top' : -dir * wrapper_h + 'px'}, speed, easing, function() { + + if( delay + speed === maxdelay ) { + + $wrapper.stop(true).animate({ + backgroundColor: settings.defaultBgColor + }, settings.boxAnimSpeed ); + + $movingItems.each(function(i) { + var $el = $(this), + style = {'top' : $el.data('deftop') + 'px'}; + + if( $el.data('type') === 'icon' ) { + style.backgroundPosition = 'top left'; + } else { + style.color = settings.defaultTextColor; + } + + $el.hide().css(style).show(); + }); + + } + }); + }, delay); + }); + }); + + }); + } + } + }; + + $.fn.iconmenu = function(method) { + if ( methods[method] ) { + return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); + } else if ( typeof method === 'object' || ! method ) { + return methods.init.apply( this, arguments ); + } else { + $.error( 'Method ' + method + ' does not exist on jQuery.iconmenu' ); + } + }; + +})(jQuery); \ No newline at end of file