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!

Reply via email to