Team:Queens Canada/Javascript/Init
From 2012.igem.org
(Difference between revisions)
Line 10: | Line 10: | ||
$span.insertBefore($("#menu ul")); | $span.insertBefore($("#menu ul")); | ||
- | var $menu_link = $('#menu li a:not( | + | var $menu_link = $('#menu li a:not(:children)'), |
$hovered = $('#menu a.hovered'),/**/ | $hovered = $('#menu a.hovered'),/**/ | ||
$hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/ | $hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/ |
Revision as of 03:49, 25 September 2012
jQuery(document).ready(function($) {
/*define easing you can omit this if you don't want to use the easing plugin*/
jQuery.easing.def = "easeInOutBack";
/* create the span tht will be animated across the menu*/ /* declare our many variables for easy ref*/ var $span = $(''); $span.insertBefore($("#menu ul")); var $menu_link = $('#menu li a:not(:children)'), $hovered = $('#menu a.hovered'),/**/ $hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/ /* declare our many colors that can confuse a chameleon*/ var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab']; /*iterate through all menu links and apply colors to border top */ $menu_link.each(function(index){ $menu_link.eq(index).css('border-color',$colour_arr[index]); }); /* all the magic happens here*/ function init () { if($hovered_pos) { $span.css('left',$hovered_pos); var index = 0; /* search for the selected menu item*/ for(k=0; k<$menu_link.length; k++) { if($($menu_link[k]).hasClass('hovered')) { index = k; } } $span.css('background',$colour_arr[index]); } /*mouseenter funtion*/ $menu_link.each( function( intIndex ){ $(this).on ( "mouseenter", function(event){ var x = $(this).position('#menu'); x = x.left; $span.css('background',$colour_arr[intIndex]); $span.stop(); $span.animate({ left: x },600); } ); } ); /* mouseout function*/ $menu_link.each( function( intIndex ){ $(this).on ( "mouseleave", function(event){ $span.stop(); var x = -100; if($hovered_pos) { x = $hovered_pos; var index = 0; for(l=0; l<$menu_link.length; l++) { if($($menu_link[l]).hasClass('hovered')) { index = l; } } $span.css('background',colour_arr[index]); } $span.animate({ left: x },600); } ); } ); } /* call init our function*/ init();
});