Jquery slider: smooth click animation

Question

jquery sliders contain a "animate" opton that when set to "true" will slide the handle into postion when the slider bar is clicked.

Im using my slider to scroll the content in another div, creating a similar eeffect as the one on the apple website. http://www.apple.com/mac/

the problem is that when i click the sliderbar it smoothly animates the handle but not the other div. i have the other div scrolling on the "slide" and "change" events. any ideas how i can achieve smooth scrolling for the other div?

Thanks in advance, oh gods of jQuery.

my code:

var list = $('.sliderGallery ul');

$('.slider').slider({
    min:0,
    max:1500,
    animate: true,
    slide: function(event, ui) { list.css('left', '-' + ui.value + 'px'); },
    change: function(event, ui) { list.css('left', '-' + ui.value + 'px'); }
});

Answer 1

It's been a while since I used JavaScript but as far as I remember jQuery you can try to do the same thing you are already doing but using animation effect. Try this:

var list = $('.sliderGallery ul');

$('.slider').slider({
    min:0,
    max:1500,
    animate: true,
    slide: function(event, ui) { list.animate({'left': '-' + ui.value + 'px'}, 'normal'); },
    change: function(event, ui) { list.animate({'left': '-' + ui.value + 'px'}, 'normal'); }
});

This code may not work right away but it hopefully might serve as a starting point. Here's a link to this function documentation: animate( params, [duration], [easing], [callback] ) in Effects/animate .