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 });
