Help with animation

Question

I used the "FeatureList" JQuery Plugin to create my own content slider.

The script can be found here: http://pastebin.com/7iyE5ADu

Here is a sample image showing what I can achieve: http://i41.tinypic.com/6jkeq1.jpg

In fact, the slider adds the “current” class to the element (in the example, squares 1,2 and 3) and for each thumb shows the contents in the main area.

In this example, with an interval of 2 seconds, the script switch switches from 1 to 2, from 2 to 3, etc.

I would like to do continuous thumb animation, can anyone help me?

Answer 1

• DEMO: http://aseptik.net/demo/help-with-animation

$(function() { //go trought each LI $('#tabs > li').each(function(i) { // and Add incremental ID to each one... $(this).attr('id', i + 1); }); //set interval... and call function setInterval('swapImages()', 2000); }); function swapImages() { var images = ['junku','codepoet','rappensuncle','nuomi','jam343','kk','ccgd','xdjio']; //count all LI's var total_lis = $('#tabs > li').size(); // get the current LI ID based on where .current class... var start_pos = parseInt($('#tabs li a.current').parent().attr('id')); //remove the .current class for this LI... $('li#' + start_pos).children().attr('class', ''); //calculate next LI ID... var next_pos = (start_pos < total_lis) ? start_pos + 1: 1; //add .current class to the new LI $('li#' + next_pos).children().attr('class', 'current'); // monitor the position of current LI, if 3th OR multiple of the total do the magix... if ((start_pos == 3) || (start_pos % total_lis == 0) || (next_pos == total_lis)) { $('li#' + next_pos).prevAll().andSelf().attr('class', 'faded').fadeOut(200); $('li#' + next_pos).nextAll('.faded').andSelf().attr('class', '').fadeIn(200); } //Append some stuff recursive... $('#output li').fadeOut(200,function() { $(this).html('<img src="http://l.yimg.com/g/images/home_photo_' + images[next_pos] + '.jpg" />' + '<a href="#">See project details</a>').fadeIn(200); }); }