JQuery Slider animation

I would like to animate that slider, http://jqueryui.com/demos/slider/#option-animate so basically when it moves to from one to the other position movement is smooth, i implemented that code but it doesn't work for me:

<script>
 开发者_运维知识库   $(function() {
        $( "#tabs" ).tabs({
            select: function( event, ui ) {
                $( "#slider" ).slider( "value", ui.index );
            }


        });
        $( "#slider" ).slider({


            min: 0,
            max: $( "#tabs" ).tabs( "length" ) - 1,
            slide: function( event, ui ) {
                $( "#tabs" ).tabs( "select", ui.value );


                },


            animate: true
        });
    });
    </script>

---

You broke the animation when you set the slide: { ... } options. Adding $(this).slide(); fixes the animation

$(function() {
    $("#tabs").tabs({
        select: function(event, ui) {
            $("#slider").slider("value", ui.index);
        }
    });
    $("#slider").slider({
        min: 0,
        max: $("#tabs").tabs("length") - 1,
        slide: function(event, ui) {
            $("#tabs").tabs("select", ui.value);
            $(this).slide(); // fixes the animation
        },
        animate: true
    });
});

DEMO HERE