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

Question

我正在使用 jQuery UI 滑块。如果我单击任何滑块范围，有什么方法可以显示当前动画滑块值？

目前，滑块值不会在滑块“滑动”时设置动画，前提是滑块的animate: true;

---

例如：

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

---

它只是从 0 变为 20，而不是 0->1->2->3->4->5->6 ... ->19->20。（改变值的动画效果）。这类似于此网络的滑块：Slider Example。任何人都可以做到这一点？

Answer 1

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

这个jsFiddle可以做到这一点，并在单击预设值时自动为 Button 设置动画。

编辑：根据您最近通过澄清示例的要求，这是一种更好的方法，可以使用已知值实现相同的目标......无需使用昂贵的计算JavaScript Math.ceil()。

新的 jsFiddle

好处是已知百分比以浮点值的形式提供，这可能会影响其使用方式或滑块顶部/底部是否有标记/热点。

Answer 2

在动画滑块值上检查我的解决方案。归功于@arttronics，因为我在他的jsFiddle之上更新了我的解决方案。:)

尝试单击滑块以查看动画值。:)

Answer 3

我相信您只需要将动画属性添加到滑块。例如：

  $( "#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))
                }
            });

        }
    });

您可能必须将someValue0 更改为之前位置的值。并且还可以根据拉动滑块的方式改变动画的方向，但这是一个起点。