JQuery Slider动画

Question

我想设置滑块的动画， http://jqueryui.com/demos/slider/#option-animate所以基本上当它从一个位置移动到另一个位置时，运动是平稳的， 我实现了该代码，但它对我不起作用：

<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>

Answer 1

您在设置slide: { ... }选项时打破了动画。添加$(this).slide();可修复动画

$(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