Adding Snap to jQuery UI Slider, but keeping animation

I setup a timeline-like content scroller to do a horizontal slider between 5 years.

I wanted to add a snap to between them. This works, though now I don't see the animation sliding from one to the other. How do I have both the animation of scrolling between points and the snap.

This is my jQuery snippet:

//build slider
    var scrollbar = $( ".scroll-bar" ).slider({
        value: 10,
        min: 0,
        max: 100,
        step: 25,
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                ) + "px" )开发者_运维问答;
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        }
    });

 slide: function(event, ui) {
        if (scrollContent.width() > scrollPane.width()) {
            scrollContent.animate({
                "margin-left": Math.round(ui.value / 100 * (scrollPane.width() - scrollContent.width()))
            }, 20);

        } else {
            scrollContent.animate({
                "margin-left": 0
            }, 20);
        }
    }