1 jQuery(document).ready(function($) { 2 3 /*define easing you can omit this if 4 you don't want to use the easing plugin*/ 5 jQuery.easing.def = "easeInOutBack"; 6 7 /* create the span tht will be animated across the menu*/ 8 /* declare our many variables for easy ref*/ 9 var $span = $('<span class="colourful"></span>'); 10 $span.insertBefore($("#menu ul")); 11 12 var $menu_link = $('#menu li a'), 13 $hovered = $('#menu a.hovered'),/**/ 14 $hovered_pos = $hovered.position('#menu');/*position of hovered menu item*/ 15 16 /* declare our many colors that can confuse a chameleon*/ 17 var $colour_arr = ['#fbb92e','#f8d52f','#b4f62f','#54f7a8','#3ff7f3','#3a97fa','#6835f9','#d544f6','#f650ab']; 18 19 /*iterate through all menu links and apply colors to border top */ 20 $menu_link.each(function(index){ 21 22 $menu_link.eq(index).css('border-color',$colour_arr[index]); 23 24 }); 25 26 /* all the magic happens here*/ 27 function init () { 28 29 30 /*mouseenter funtion*/ 31 $menu_link.each( 32 function( i ){ 33 $(this).on ( 34 "mouseenter", 35 function(event){ 36 37 var x = $(this).position('#menu'); 38 x = x.left; 39 40 $span.css('background',$colour_arr[i]); 41 42 $span.stop(); 43 $span.animate({ 44 45 left: x 46 },600); 47 } 48 ); 49 50 } 51 ); 52 53 /* mouseout function*/ 54 55 56 57 $("ul").on("mouseleave", 58 59 60 61 function(){ 62 63 $span.stop(); 64 65 $span.animate({left:-100},600) 66 67 68 69 } 70 71 ) 72 } 73 /* call init our function*/ 74 init(); 75 });