https://www.univaq.it/js/jquery.arrowFade.js

1(function($) {   
2
3	$.fn.arrowFade = function(options) {
4	
5		options = $.extend({
6			speed : 500,
7			easingNav : 'easeOutBack',
8			timeout : 5000,
9			fxSlide : 'fade',
10			navSlider : '#nav-slider ul',
11			slider : '#slider .inner',
12			activeItem : 'current',
13			pauseOnHover : 'true',
14			arrowClass : 'arrow'
15			
16		}, options);        
17	
18		return this.each(function() {   
19            
20		 	var nav = $(this),
21		 		currentPageItem = $('.'+options.activeItem, nav);            
22        
23            var link_nav = $(options.navSlider+' a');
24            var li_nav = $(options.navSlider+' li');                                                                  
25		 		
26            function move($element)
27            {
28                var blob = $('.'+options.arrowClass, nav);
29                
30            	blob.animate(
31            		{
32            			left : $element.position().left,
33            			width : $element.width()
34            		},
35            		{
36            			duration : options.speed,
37            			easing : options.easingNav,
38            			queue : false
39            		}
40            	);     
41            }   
42        		 		
43		 	$('<li class="'+options.arrowClass+'"></li>').css({
44		 		width : currentPageItem.width(),
45		 		left : currentPageItem.position().left
46		 	}).appendTo(this);
47        
48            link_nav.click(function() { 
49                var index = link_nav.index(this);
50                $(options.slider).cycle(index);
51                
52                $('.'+options.activeItem).removeClass(options.activeItem);
53                $(this).parent('li').addClass(options.activeItem);
54                
55                return false;
56            });  
57        
58            li_nav.click(function() { 
59                var index = li_nav.index(this);
60                $(options.slider).cycle(index);
61                
62                $('.'+options.activeItem).removeClass(options.activeItem);
63                $(this).addClass(options.activeItem);
64            });       
65        
66            $(options.slider).cycle({
67                fx: options.fxSlide,
68                speed: options.speed,
69                timeout: options.timeout,
70                pause: options.pauseOnHover,
71                cleartype:1,
72                cleartypeNoBg:false,
73                before: function(currSlideElement, nextSlideElement, args, forwardFlag){
74                    $('.'+options.activeItem).removeClass(options.activeItem);
75                    id = $(nextSlideElement).attr('id');
76                    $(options.navSlider+' a[href="#'+id+'"]').parent('li').addClass(options.activeItem);    
77                                                                         
78                    index = $(options.slider+' > div').index(nextSlideElement);
79                    sel = $(options.navSlider+' li:eq('+index+')');
80                    
81                    //alert('left: '+$(sel).offset().left+"\n width: "+$(sel).width());
82                    
83                    move(sel);  
84                }
85            });    
86		 	
87			$('li:not(.'+options.arrowClass+')', nav).click(function() {
88				move($(this));
89			});
90		 	
91			$('li:not(.'+options.arrowClass+') a', nav).click(function() {
92				move($(this).parent('li'));
93			});     
94		
95		}); // end each             
96	
97	};                                      
98
99})(jQuery);