jQuery UI animation not working?

I have built a slider with jQueryUI through much effort (see here) but I have the slight issue of the <ul> tag no longer sliding with a开发者_如何学JAVAnimation like it used to? I want to use the handle and watch the <ul> slide smoothly, but no code I can think of is making it work? Any ideas? Test sample of page here.

All I would really love is for the <ul> to move smoothly when I move the handle or click on the sliders path.

Cheers guys :)

Add the stop method before the animation and replace the slide function with the animation too.

$('.handle', container).slider({
    ...
    stop: function (event, ui) {
        $(".pics").stop().animate({"left" : ui.value * -1}, 500);
    },
    slide: function (event, ui) {
        $(".pics").stop().animate({"left" : ui.value * -1}, 500);
    }
});

Also see the jsfiddle where I moved the callbacks to one function.