0

我已经浏览了几个小时，仍然找不到有价值的东西。

我想将文本字段的值从 0 设置为它的值。例如，我有一个 value="100" 的文本输入，并且在任何事件或页面加载之后，我希望这个值从 0 动画到 100（输入的起始值）

我怎么能这样做？提前非常感谢！

4

2 回答 2

3

您可以使用 jQuery 的“动画”功能的“步骤”选项来对动画的每个“步骤”执行操作。

//When the document is ready..
jQuery(document).ready(function () {
    //..loop over all of the INPUT elements that have a non-blank data-value field..
    jQuery("input[data-value!='']").each(function (inputKey, inputItem) {
        //..animate between the current value of the input (i.e. 0) and the desired
        //  value specified in the data-value field, setting to the full value upon
        //  completion of the animation
        jQuery({
            value: jQuery(inputItem).val()
        }).animate({
            value: jQuery(inputItem).data("value")
        }, {
            step: function () {
                jQuery(inputItem).val(Math.round(this.value));
            },
            complete: function() {
                jQuery(inputItem).val(jQuery(inputItem).data("value"));
            }
        });
    });
});

查看这个 jsFiddle 示例： http : //jsfiddle.net/yE86J/9/1

我建议使用四舍五入来确保您最终得到参考：http : //www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/，jQuery如何查找元素基于数据属性值？

于 2013-03-06T13:50:58.063 回答
0

尝试

$(document).ready(function(){
  increase( $('#i') );
});

function increase( i , v ){
    // let's store the initial/original input's value
    if( !i.data.originalValue ) i.data.originalValue = i.val();
    var currentVal = v || 0;
    i.val(currentVal);
    // if current value == initial/original value, then break the script
    if( i.val() == i.data.originalValue ) {
        alert( 'Complete!' ); // <-- callback here
        return;
    }
    currentVal++;
    // call this function again after 30ms
    setTimeout( increase , 30 , i , currentVal );
}

这是一个小提琴示例

于 2013-03-06T14:14:41.713 回答