jQuery动画输入字段的变化值

Question

我有以下 jsfiddle：http://jsfiddle.net/60oa2zah/

//Add Value to slider button
$("[data-slider]")
    .each(function () {
        var input = $(this);
    })
        .bind("slider:ready slider:changed", function (event, data) {
            $(".dragger")
                .html('<span>$' + addCommas(data.value.toFixed(0)) + '</span>');
        });
//Add thousands separator  
function addCommas(nStr) {
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

加载页面时，我希望滑块的动画效果从 100 美元的起始值到 500 美元的结束值。我已经尝试为 value 字段设置动画，但没有任何运气。还有另一种方法可以做到这一点吗？在页面加载时，滑块应该会自行拖动到 500 美元。

这是我尝试为滑块设置动画（不起作用...）

//Drag from 100 to 500
$(document).ready(function() {
$("#Amount").val(
  $({countNum: 100}).animate({countNum: 500}, {
  duration: 3000,
  easing:'linear',
  step: function() {
    console.log(Math.floor(this.countNum));
  }
}); ); 
});

Answer 1

如果你愿意，你真的可以使用 jQuery 的.animate() 函数，而且你的代码很接近。 (reference)

不过有两件事：

1. 动画值必须从零开始。所以你需要让它从0 动画到400，而不是从100 到500。 (See the comment to this answer)
2. 使用selector.simpleSlider("setValue", newValue) 设置滑块的值。 (jQuery Simple Slider documentation)

代码如下：

$(document).ready(function() {
    $({ val: 0 }).animate({ val: 400 }, {
        duration: 3000,
        easing: 'linear',
        step: function(val) {
            $("#Amount").simpleSlider("setValue", 100 + Math.ceil(val));
        }
    });
});

jsfiddle

您可以使用setInterval()，而不是使用.animate()，如下所示：

$(document).ready(function() {
    var interval = setInterval(function() {
        var val = +$('#Amount').val() + 100;
        $("#Amount").simpleSlider("setValue", val);
        if (val >= 500) {
            clearInterval(interval);
        }
    }, 750);
});

jsfiddle

Answer 2

好吧，尝试了几次，但似乎可行的方法如下：http://jsfiddle.net/60oa2zah/2/

$(function () {

    var sliderValue = 100;

    var interval = setInterval(function(){
        sliderValue += 100;
        $("[data-slider]").simpleSlider("setValue", sliderValue);
    }, 300);

    //Add Value to slider button
    $("[data-slider]").on("slider:ready, slider:changed", function (event, data) {
        $(".dragger")
            .html('<span>$' + addCommas(data.value.toFixed(0)) + '</span>');

        if(data.value == 500){
            clearInterval(interval);
        }
    });

    //Add thousands separator  
    function addCommas(nStr) {
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
    }
});

正如@Barmar 所说，您只需要使用setInterval() : https://developer.mozilla.org/en-US/docs/Web/API/Window.setInterval

jQuery.animate() 并不能真正解决这个问题，因为（如 API 中所述），它适用于

一组 CSS 属性的动画。

Answer 3

好的，我解决了您的问题的部分，但是让滑块随着数字更新而移动可能有点完全不同。这是我所做的修改。

$(document).ready(function() {

        $({countNum: 100}).animate({countNum: 500}, {
          duration: 3000,
          easing:'linear',
          step: function() {
              $(".dragger").html('<span>$' + Math.ceil(addCommas(this.countNum)) + '</span>');
          }    
        });

});

因此，将其包装在 $("#Amount).val(...) 中并没有按照您的想法进行，您希望它在每次动画触发时更新值。这就是 step 函数但是确实如此。所以我所做的只是删除 $("#Amount) 并让 step 函数更新您的 html。

不过，我认为您可能需要在这里重新考虑您的解决方案。只要付出一些努力，这个动画方法将起作用。但这里真正的、更深层次的问题是 UI 需要能够随着值的变化不断更新 UI。有一些库可以在 javascript 中执行此操作，并且做得很好，这是 JS 中的一个概念，称为data-binding。

Angular.js可以实现数据绑定，但是对于你的需求可能有点过头了（还是强烈推荐学习。）我想你会对Knockout.js更感兴趣，它是专门为快速上页量身定做的并进行数据绑定。

您可以考虑让用户界面“监视”您的美元金额，并根据该值调整滑动条。如果操作正确，不需要 JS 来手动更新 UI，库会为您处理。 :)

无论如何，祝你好运！

Answer 4

试试这个：

$(document).ready(function() {
    $({ val: 100 }).animate({ val: 500 }, { step: function(val) { $("#Amount")[0].value = val.toString(); }});
});

当然，如果你想添加“持续时间”和“缓动”，你可以这样做......