If anyone knows the slider on the mac app store then this is what I have recreated. Three problems though.
- There seams to be an animation delay between the slider on the right and that on the main fader
- The insertAfter function is doing nothing
- The slider is not on an infinite loop
I have set up a fiddle for testing if anyone can solve it. http://jsfiddle.net/Z5uER/2/
$(document).ready(function(){
$('.sismain a').css('opacity', 0);
var slideqnt = $('.sismain a').length;
var slidecur = 0;
var slidelay = 0;
var slidemove = 0;
$('.sismain a').each(function(){
$(this).delay(slidelay).animate({opacity: 1, leaveTransforms:true}, {duration:2000, queue:true});
slidemove -=167;
$('.siscolin').delay(slidelay - 2000).animate({top: slidemove, leaveTransforms:true}, {duration:2000, queue:true});
slidelay += 6000;
$('.siscolin a:first').insertAfter('.siscolin a:last');
$(this).delay(slidelay).animate({opacity: 0, leaveTransforms:true}, {duration:2000, queue:true});
});
});
I created a similar functionality. Maybe I'm going to write a plugin for this.
Be sure to set all the dimensions of your div's to the right values (and also the absolute positioning within the script):
HTML
CSS
JavaScript
Fiddle: http://jsfiddle.net/dirkpennings/kf3v8/1/
I hope this helps.