Javascript 在滑块上显示动画效果'；s值

我正在使用jQueryUI滑块。如果单击任何滑块范围，是否有任何方法显示当前动画滑块值

当前，当滑块“滑动”时，滑块值不会设置动画，前提是滑块的

animate:true


例如：


滑块起始值：0
我点击了滑块范围：20
最终滑块值：20


它只是从0改为20，而不是0->1->2->3->4->5->6…->19->20. （更改值时的动画效果）。与此web的滑块类似：。任何人都可以这样做？
如果您指的是jQuery UI滑块，请尝试：

$('div#foo')
    .slider({
        animate: true,
        slide: function(event, ui) {
           $('div#bar').text(ui.value);         
        }
    });

编辑
当我需要显示增加和减少数字的动画效果时，我在web上的某个地方发现了这段代码（不记得该归功于谁）：

var num_holder = $('#foo');
        $({ someValue: 0 }).animate({
            someValue: 100
        }, {
            duration: 1000,
            easing:'swing',
            step: function() {
                num_holder.text(Math.ceil(this.someValue))
            }
        });


这是完全未经测试的，但可能会奏效：

$('div#foo')
    .slider({
        animate: true,
        slide: function(event, ui) {

            $({ someValue: 0 }).animate({
                someValue: ui.value
            }, {
                duration: 1000,
                easing:'swing',
                step: function() {
                    $('div#bar').text(Math.ceil(this.someValue))
                }
            });

        }
    });

您可能必须将
someValue
从0更改为前一个位置的值。也可以根据拖动滑块的方式更改动画的方向，但这是一个起点。
我认为您希望让滑块按钮在滑块条的不同部分来回移动，并在网页上看到数字更新

这样做，以及在单击预设值时自动设置按钮的动画

编辑：根据您最近通过澄清示例提出的要求，这里有一个更好的方法，可以使用已知的值实现同样的效果。。。无需使用昂贵的
JavaScript Math.ceil（）
进行计算


额外的好处是，已知的百分比作为浮点值提供，这可能会影响如何使用它，或者滑块顶部/底部是否有标记/热点。
检查。当我在他的基础上更新我的解决方案时，将@arttronics归功于他。：）

尝试单击滑块以查看值是否已设置动画。：）
 我相信您只需要将animate属性添加到滑块。例如：

  $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 100,
        value: 1,
        animate: true,
        slide: function( event, ui ) {              
             $('#amount').val(ui.value);                 
         }

});

以下是jquery UI滑块示例：

  $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 100,
        value: 1,
        animate: true,
        slide: function( event, ui ) {              
             $('#amount').val(ui.value);                 
         }

});

Ya，我可以做到这一点，这是我的原始代码：）但是ui.value没有顺利更改，而是更改到了您单击的点。@Roylee“没有顺利更改”是什么意思。你想在数字上下移动时产生动画效果吗？是的，没错。我刚刚更新了我的问题：）对不起，如果我没有在开头清楚地提到：）这是你的小提琴吗？这看起来有很好的文档记录，谢谢兄弟：）但这不是我想要的，我已经找到了我的解决方案，并对你的小提琴做了一些更新。单击滑块范围栏，查看：）是的，我为CSS3旋转函数制作了它，并且总是给出比帮助新用户使用jQuery通常需要的更多的注释。现在我知道你们想要什么了，看看我的最新答案吧。这是真的，有良好文档记录的程序总是让新的人理解：）检查过了，很好！=）我想我必须为你的辛勤工作而表扬你：）OP和我发布了两个JSFIDLE，当它在滑块上来回移动时，将以数字形式显示值。这就是OP想要的。查看他的答案和我最新的JSFIDLE，看看是否有更好的方法。