在滑塊的值上顯示動畫效果

Question

我正在使用jQuery UI滑塊。 如果我點擊任何滑塊范圍，有沒有辦法顯示當前的動畫滑塊值？

目前，滑塊是'滑動'時，滑塊值不會動畫，只要滑塊是animate: true;

---

例如：

• 滑塊起始值：0。
• 我點擊Slider范圍：20。
• 最終滑塊值：20。

---

它只是從0變為20而不是0-> 1-> 2-> 3-> 4-> 5-> 6 ... - > 19-> 20。 （動畫對更改值的影響）。 這類似於這個網頁的滑塊： 滑塊示例 。 任何人都可以這樣做？

Answer 1

我想你想讓Slider Button移動到Slider Bar的不同部分，並在網頁上看到數字更新 。

這個jsFiddle可以實現這一點，並且在單擊預設值時自動為Button設置動畫。

編輯：根據你最近的要求，通過澄清的例子，這是一個更好的方法， 使用已知的值實現相同的事情......不需要使用昂貴的JavaScript Math.ceil()計算。

新jsFiddle

獎勵是已知百分比作為浮點值提供，這可以改變它的使用方式或滑塊條頂部/底部是否有標記/熱點 。

Answer 2

在動畫滑塊值上選中我的解決方案 。 當我在他的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更改為上一個值的值。 並且還根據滑塊的拉動方式改變動畫的方向，但這是一個起點。