多彩背景色左右滑动菜单导航

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