Question

我正在使用jQuery UI滑块。如果我点击任何滑块范围，有没有办法显示当前的动画滑块值？

目前，如果滑块为animate: true;

，滑块为“滑动”时滑块值不会生成动画

例如：

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

它仅从0变为20而不是0-> 1-> 2-> 3-> 4-> 5-> 6-> 19-> 20。（动画对更改值的影响）。这与此网站的滑块类似：Slider Example。任何人都可以这样做吗？

Answer 1

我认为您希望滑块按钮移动到滑块栏的不同部分，并在网页上看到数字更新

这个jsFiddle可以做到这一点，并且在点击预设值时会自动为按钮设置动画。

编辑：根据您最近的要求，通过明确的示例，这是一个更好的方法，使用已经已知的值实现相同的事情 ...无需使用昂贵的JavaScript Math.ceil()进行计算。

New jsFiddle

奖励是已知的百分比以浮点值提供，这可能会对其使用方式或标记产生影响/热点位于Slider Bar的顶部/底部。

Answer 2

检查My Solution on animated slider value。我在jsFiddle之上更新了我的解决方案，以此归功于@arttronics。：）

尝试单击滑块以查看动画值。：）

Answer 3

我相信你只需要将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滑块示例：

http://jqueryui.com/demos/slider/#multiple-vertical

Answer 4

如果您指的是jQuery UI滑块，请尝试：

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

修改

当我需要在增加和减少数字时显示动画效果时，我在网络上的某个地方找到了这个代码（不记得是谁给予了信任）：

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

http://jsfiddle.net/cVndp/

这是完全未经测试的，但也许它会起作用：

$('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更改为上一个地方的值。并且还根据滑块的拉动方式改变动画的方向，但这是一个起点。

在滑块的值上显示动画效果

4 个答案:

修改