jQuery动画输入字段的变化值

Posted 2023-05-08

【中文标题】jQuery动画输入字段的变化值

【英文标题】：jQuery to animate changing value of input field

【发布时间】：2014-10-12 01:08:58

【问题描述】：

我有以下 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+)(\d3)/;
    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));
  
); ); 
);

【问题讨论】：

你需要使用setInterval来运行一个周期性的函数来更新输入并重绘滑块。

我试过了。我真的做到了。答案确实是这个滑块不支持。任何入侵它的尝试都会令人厌烦，并且不适合这个场地。祝你好运。

【参考方案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

您可以使用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

【讨论】：

我真的很喜欢你的第一个解决方案，问题，我试图在 simpleSlider 上找到一些文档，它是第三方工具还是 JS 的一部分？我所能找到的只是一个引用它的第三方库。肯定从这个问题中学到了很多东西。哈哈。

@JordanJamesHolt - 这是一个依赖于 jQuery 的库：loopj.com/jquery-simple-slider

【参考方案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+)(\d3)/;
        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 属性的动画。

【参考方案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，库会为您处理。 :)

无论如何，祝你好运！

【参考方案4】：

试试这个：

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

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