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。我试过动画值字段，但没有运气。还有另一种方法来实现这一目标吗？在页面加载时，滑块应该显示为将自身拖动到$ 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）

但有两件事：

动画的值必须从零开始。因此，您需要将其设置为0到400，而不是从100到500。（See the comment to this answer）
使用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

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

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

});

因此，将其包含在$（＆＃34; #Amount）.val（...）中并没有按照您的想法进行操作，您希望每次触发动画时都更新该值。然而，这就是步进功能所做的。所以我所做的就是删除$（＆＃34; #Amount）并让步骤函数更新你的html。

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

Angular.js可以实现数据绑定，但这可能对您的需求有点过分（仍然强烈推荐学习。）我认为您会对Knockout.js更加兴趣，{{3}}专门针对快速定制获取页面并使用数据绑定。

你可以考虑使用UI＆＃34; watch＆＃34;您的美元金额，并使滑块更改为该值。如果操作正确，则无需JS手动更新UI，库将为您处理。：）

无论如何，祝你好运！

Answer 4

试试这个：

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

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

jQuery为动画输入字段的变化值设置动画

4 个答案: