Team:KAIST Korea
From 2012.igem.org
(Difference between revisions)
(Prototype team page) |
|||
(44 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | < | + | {{:Team:KAIST_Korea/top}} |
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <style type="text/css"> | ||
+ | div .iGEMLogo{ | ||
+ | position:absolute; | ||
+ | z-index:4; | ||
+ | top:-40px; | ||
+ | padding : 0 0 0 10px; | ||
- | + | } | |
- | + | ||
- | + | a{ | |
- | + | color:#000; | |
- | + | text-decoration:none; | |
- | + | } | |
- | + | .clr{ | |
+ | clear:both; | ||
+ | } | ||
+ | .container { | ||
+ | width:600px; | ||
+ | position:relative; | ||
+ | top: 230px; | ||
+ | left: 220px; | ||
+ | z-index:100; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | .content { | ||
+ | width:600px; | ||
+ | margin:0 auto; | ||
+ | } | ||
+ | .content{ | ||
+ | width:600px; | ||
+ | position:relative; | ||
+ | } | ||
+ | |||
+ | /*Sliding Text and Icon Menu Style*/ | ||
+ | .sti-menu{ | ||
+ | width:600px; | ||
+ | position:relative; | ||
+ | margin:60px auto 0 auto; | ||
+ | } | ||
+ | .sti-menu li{ | ||
+ | float:left; | ||
+ | width:90px; | ||
+ | height:160px; | ||
+ | margin:1px; | ||
+ | } | ||
+ | .sti-menu li a{ | ||
+ | display:block; | ||
+ | overflow:hidden; | ||
+ | background:#fff; | ||
+ | opacity:0.6; | ||
+ | text-align:center; | ||
+ | height:100%; | ||
+ | width:100%; | ||
+ | position:relative; | ||
+ | -moz-box-shadow:1px 1px 2px #ddd; | ||
+ | -webkit-box-shadow:1px 1px 2px #ddd; | ||
+ | box-shadow:1px 1px 2px #ddd; | ||
+ | } | ||
+ | .sti-menu li a h2{ | ||
+ | color:#000; | ||
+ | font-family: "Times New Roman", arial, serif; | ||
+ | font-size:13px; | ||
+ | font-weight:bold; | ||
+ | position:absolute; | ||
+ | padding:5px; | ||
+ | width:80px; | ||
+ | top:90px; | ||
+ | left:0px; | ||
+ | text-shadow: 0px 1px 1px black; | ||
+ | } | ||
+ | .sti-menu li a h3{ | ||
+ | font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif; | ||
+ | font-size:11px; | ||
+ | font-style:italic; | ||
+ | color: #111; | ||
+ | position:absolute; | ||
+ | top:115px; | ||
+ | left:0px; | ||
+ | width:80px; | ||
+ | padding:5px; | ||
+ | } | ||
+ | .sti-icon{ | ||
+ | width:60px; | ||
+ | height:60px; | ||
+ | position:absolute; | ||
+ | background-position:top left; | ||
+ | background-repeat:no-repeat; | ||
+ | background-color:transparent; | ||
+ | left:15px; | ||
+ | top:20px; | ||
+ | } | ||
+ | .sti-icon-home{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/igem.org/5/5c/KAIST_Home.png'); | ||
+ | } | ||
+ | .sti-icon-team{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/igem.org/c/c4/KAIST_Teampage.png'); | ||
+ | } | ||
+ | .sti-icon-part{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/igem.org/a/a6/KAIST_Part.png'); | ||
+ | } | ||
+ | .sti-icon-project{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/igem.org/1/19/KAIST_Project.png'); | ||
+ | } | ||
+ | .sti-icon-note{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/igem.org/c/c8/KAIST_Note.png'); | ||
+ | } | ||
+ | .sti-icon-attr{ | ||
+ | background-image: url('https://static.igem.org/mediawiki/igem.org/1/14/KAIST_Attr.png'); | ||
+ | } | ||
+ | /* CSS reset */ | ||
+ | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | html,body { | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | table { | ||
+ | border-collapse:collapse; | ||
+ | border-spacing:0; | ||
+ | } | ||
+ | |||
+ | fieldset,img { | ||
+ | border:0; | ||
+ | } | ||
+ | |||
+ | input{ | ||
+ | border:1px solid #b0b0b0; | ||
+ | padding:3px 5px 4px; | ||
+ | color:#979797; | ||
+ | width:190px; | ||
+ | } | ||
+ | |||
+ | address,caption,cite,code,dfn,th,var { | ||
+ | font-style:normal; | ||
+ | font-weight:normal; | ||
+ | } | ||
+ | |||
+ | ol,ul { | ||
+ | list-style:none; | ||
+ | } | ||
+ | |||
+ | caption,th { | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | h1,h2,h3,h4,h5,h6 { | ||
+ | font-size:100%; | ||
+ | font-weight:normal; | ||
+ | } | ||
+ | |||
+ | q:before,q:after { | ||
+ | content:''; | ||
+ | } | ||
+ | |||
+ | abbr,acronym { | ||
+ | border:0; | ||
+ | } | ||
+ | |||
+ | #main | ||
+ | { | ||
+ | min-height: 100%; | ||
+ | width: 980px; | ||
+ | margin: 0 auto; | ||
+ | background-color: #FFFFFF; | ||
+ | } | ||
+ | |||
+ | #main #home-img | ||
+ | { | ||
+ | position:absolute; | ||
+ | width: 980px; | ||
+ | top: -130px; | ||
+ | z-index:2 | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div id="main"> | ||
+ | <div class="container"> | ||
+ | <ul id="sti-menu" class="sti-menu"> | ||
+ | <li data-hovercolor="#37c5e9"> | ||
+ | <a href="https://2012.igem.org/Team:KAIST_Korea/Home_Intro"> | ||
+ | <h2 data-type="mText" class="sti-item">HOME</h2> | ||
+ | <h3 data-type="sText" class="sti-item">intro/iGEM</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-home sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#ff395e"> | ||
+ | <a href="https://2012.igem.org/Team:KAIST_Korea/Team_KAIST"> | ||
+ | <h2 data-type="mText" class="sti-item">TEAM</h2> | ||
+ | <h3 data-type="sText" class="sti-item">official team profile/</br>members/gallery</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-team sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#57e676"> | ||
+ | <a href="https://2012.igem.org/Team:KAIST_Korea/Part_About"> | ||
+ | <h2 data-type="mText" class="sti-item">DATA</h2> | ||
+ | <h3 data-type="sText" class="sti-item">description/</br>bio bricks</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-part sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#d869b2"> | ||
+ | <a href="https://2012.igem.org/Team:KAIST_Korea/Project_Background"> | ||
+ | <h2 data-type="mText" class="sti-item">PROJECT</h2> | ||
+ | <h3 data-type="sText" class="sti-item">overview/results/</br>future plan/modeling</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-project sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#ffdd3f"> | ||
+ | <a href="https://2012.igem.org/Team:KAIST_Korea/Notebook_Labnote"> | ||
+ | <h2 data-type="mText" class="sti-item">NOTEBOOK</h2> | ||
+ | <h3 data-type="sText" class="sti-item">lab note/protocol</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-note sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | <li data-hovercolor="#d4d5d4"> | ||
+ | <a href="https://2012.igem.org/Team:KAIST_Korea/Plus_Safety"> | ||
+ | <h2 data-type="mText" class="sti-item">PLUS</h2> | ||
+ | <h3 data-type="sText" class="sti-item">safety/human prac./</br>attr./sponsors</h3> | ||
+ | <span data-type="icon" class="sti-icon sti-icon-attr sti-item"></span> | ||
+ | </a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="iGEMLogo"> | ||
+ | <a href="https://igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2012/0/00/KAIST_iGEM_logo.png"/></a> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <img id="home-img" src="https://static.igem.org/mediawiki/2012/b/b9/Kaist_enter_background.png"/> | ||
+ | </div> | ||
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
- | + | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script> | |
- | + | <script> | |
- | + | jQuery.easing['jswing'] = jQuery.easing['swing']; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <!--- | + | jQuery.extend( jQuery.easing, |
+ | { | ||
+ | def: 'easeOutQuad', | ||
+ | swing: function (x, t, b, c, d) { | ||
+ | //alert(jQuery.easing.default); | ||
+ | return jQuery.easing[jQuery.easing.def](x, t, b, c, d); | ||
+ | }, | ||
+ | easeInQuad: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t + b; | ||
+ | }, | ||
+ | easeOutQuad: function (x, t, b, c, d) { | ||
+ | return -c *(t/=d)*(t-2) + b; | ||
+ | }, | ||
+ | easeInOutQuad: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t + b; | ||
+ | return -c/2 * ((--t)*(t-2) - 1) + b; | ||
+ | }, | ||
+ | easeInCubic: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t + b; | ||
+ | }, | ||
+ | easeOutCubic: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutCubic: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInQuart: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuart: function (x, t, b, c, d) { | ||
+ | return -c * ((t=t/d-1)*t*t*t - 1) + b; | ||
+ | }, | ||
+ | easeInOutQuart: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t + b; | ||
+ | return -c/2 * ((t-=2)*t*t*t - 2) + b; | ||
+ | }, | ||
+ | easeInQuint: function (x, t, b, c, d) { | ||
+ | return c*(t/=d)*t*t*t*t + b; | ||
+ | }, | ||
+ | easeOutQuint: function (x, t, b, c, d) { | ||
+ | return c*((t=t/d-1)*t*t*t*t + 1) + b; | ||
+ | }, | ||
+ | easeInOutQuint: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; | ||
+ | return c/2*((t-=2)*t*t*t*t + 2) + b; | ||
+ | }, | ||
+ | easeInSine: function (x, t, b, c, d) { | ||
+ | return -c * Math.cos(t/d * (Math.PI/2)) + c + b; | ||
+ | }, | ||
+ | easeOutSine: function (x, t, b, c, d) { | ||
+ | return c * Math.sin(t/d * (Math.PI/2)) + b; | ||
+ | }, | ||
+ | easeInOutSine: function (x, t, b, c, d) { | ||
+ | return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; | ||
+ | }, | ||
+ | easeInExpo: function (x, t, b, c, d) { | ||
+ | return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; | ||
+ | }, | ||
+ | easeOutExpo: function (x, t, b, c, d) { | ||
+ | return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; | ||
+ | }, | ||
+ | easeInOutExpo: function (x, t, b, c, d) { | ||
+ | if (t==0) return b; | ||
+ | if (t==d) return b+c; | ||
+ | if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; | ||
+ | return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; | ||
+ | }, | ||
+ | easeInCirc: function (x, t, b, c, d) { | ||
+ | return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; | ||
+ | }, | ||
+ | easeOutCirc: function (x, t, b, c, d) { | ||
+ | return c * Math.sqrt(1 - (t=t/d-1)*t) + b; | ||
+ | }, | ||
+ | easeInOutCirc: function (x, t, b, c, d) { | ||
+ | if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; | ||
+ | return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; | ||
+ | }, | ||
+ | easeInElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | }, | ||
+ | easeOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; | ||
+ | }, | ||
+ | easeInOutElastic: function (x, t, b, c, d) { | ||
+ | var s=1.70158;var p=0;var a=c; | ||
+ | if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); | ||
+ | if (a < Math.abs(c)) { a=c; var s=p/4; } | ||
+ | else var s = p/(2*Math.PI) * Math.asin (c/a); | ||
+ | if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; | ||
+ | return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; | ||
+ | }, | ||
+ | easeInBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*(t/=d)*t*((s+1)*t - s) + b; | ||
+ | }, | ||
+ | easeOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; | ||
+ | }, | ||
+ | easeInOutBack: function (x, t, b, c, d, s) { | ||
+ | if (s == undefined) s = 1.70158; | ||
+ | if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; | ||
+ | return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; | ||
+ | }, | ||
+ | easeInBounce: function (x, t, b, c, d) { | ||
+ | return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; | ||
+ | }, | ||
+ | easeOutBounce: function (x, t, b, c, d) { | ||
+ | if ((t/=d) < (1/2.75)) { | ||
+ | return c*(7.5625*t*t) + b; | ||
+ | } else if (t < (2/2.75)) { | ||
+ | return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; | ||
+ | } else if (t < (2.5/2.75)) { | ||
+ | return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; | ||
+ | } else { | ||
+ | return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; | ||
+ | } | ||
+ | }, | ||
+ | easeInOutBounce: function (x, t, b, c, d) { | ||
+ | if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; | ||
+ | return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | <script> | ||
+ | (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 : '#000', | ||
+ | // 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.defaultTextColor | ||
+ | }, 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); | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | $(function() { | ||
+ | $('#sti-menu').iconmenu({ | ||
+ | animMouseenter : { | ||
+ | 'mText' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1}, | ||
+ | 'sText' : {speed : 600, easing : 'easeOutExpo', delay : 400, dir : 1}, | ||
+ | 'icon' : {speed : 200, easing : 'easeOutExpo', delay : 0, dir : 1} | ||
+ | }, | ||
+ | animMouseleave : { | ||
+ | 'mText' : {speed : 200, easing : 'easeInExpo', delay : 150, dir : 1}, | ||
+ | 'sText' : {speed : 200, easing : 'easeInExpo', delay : 0, dir : 1}, | ||
+ | 'icon' : {speed : 200, easing : 'easeInExpo', delay : 300, dir : 1} | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | </body> | ||
+ | </html> |
Latest revision as of 03:37, 27 September 2012