0

何時間も閲覧しましたが、まだ価値のあるものを見つけることができません.

テキスト フィールドの値を 0 からその値にアニメーション化したいと考えています。たとえば、value="100" の textinput があり、イベントまたはページの読み込み後に、この値を 0 から 100 (入力の開始値) にアニメーション化する必要があります。

どうすればこれを行うことができますか? よろしくお願いします！

4

2 に答える 2

3

jQuery の 'animate' 関数の 'step' オプションを使用して、アニメーションの各 'step' でアクションを実行できます。

//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

最終的に確実に丸めを使用することをお勧めしますデータ属性値に基づいていますか?

于 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 に答える