jQuery 텍스트 필드의 입력 값에 애니메이션 적용

Question

몇 시간 동안 탐색했지만 여전히 가치있는 것을 찾을 수 없습니다.

텍스트 필드의 값을 0에서 해당 값으로 움직이려합니다. 예를 들어, 값이 "100"이고 모든 이벤트 또는 페이지로드 이후에이 값을 0에서 100 (입력의 시작 값)으로 애니메이트하려는 textinput이 있습니다.

어떻게하면됩니까? 많은 감사드립니다!

Answer 1

여기

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

는 시도 a fiddle example

Answer 2

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 how to find an element based on a data-attribute value?