I'm using jQuery with the pager and pagerAnchorBuilder functionality to generate the navigation into an ordered list.
My slides (#slides) are fading in and out beautifully, but I'd also like to add transitions to the pager nav (#navSlides) as well. For this particular project, the slides themselves have a large image and some text, but I'm pulling that text out of the slide and putting it into the corresponding slide nav item. I'd like the active nav item to grow in height/width in an animated way - probably with some subtle elastic/bouncy easing. If possible, I'd also like to fade the background from one color to another. If anyone knows how to do this, I'd appreciate some help. Here's my current cycle code if it helps: $.fn.cycle.updateActivePagerLink = function(pager, currSlideIndex) { $ (pager).find('li').removeClass('on').filter('li:eq('+currSlideIndex +')').addClass('on'); }; $('#slides ul').after('<div id="navSlides"><ol>').cycle({ cleartype: 1, fx: 'fade', speed: 500, timeout: 5000, pager: '#navSlides ol', pagerEvent: 'mouseover', pagerAnchorBuilder: function(idx, slide) { return '<li><div>' + $('#slides ul li:eq(' + (idx) + ') div.nav').html() + '</div></li>'; } }); @Mike Alsup - Perhaps future versions of Cycle could include animation settings for the pager nav? That would be pretty slick! thanks!