0

I've browsed for hours and still can't find something worthy.

I want to animate a value of a text field from 0 to it's value. For example i'm having a textinput with value="100" and after any event or page load i want this value to animate from 0 to 100 (the starting value of input)

How could i do this? Thanks a lot in advance!

Rootical V.
  • 829
  • 1
  • 11
  • 21

2 Answers2

3

You can use the 'step' option for the 'animate' function of jQuery to perform an action on each 'step' of the animation.

//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"));
            }
        });
    });
});

Check out this jsFiddle example: http://jsfiddle.net/yE86J/9/1

I'd recommend using rounding to ensure you end up References: 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?

Community
  • 1
  • 1
Seidr
  • 4,946
  • 3
  • 27
  • 39
  • Sorry - missed a couple of curly brackets there. – Seidr Mar 06 '13 at 13:52
  • It`s not bad, thank you - but i want to animate the specific value of an input which already has it. – Rootical V. Mar 06 '13 at 13:55
  • 1
    Then you can just change the call in the step function, i.e. jQuery("#targetInput").val(this.value); If you mean animated from 0 to 100 (100 being in the value field) then you could make use of data-fields to store the desired value. When the page loads, you can check all the inputs on the page to see if they have a data value for a desired value, and then call the above animate function. I'll post a jsFiddle with an example for you. – Seidr Mar 06 '13 at 13:56
  • I've also added a 'complete' callback to ensure the inputs final value matches the value you specified, as animate does not seem to finish in an exact amount due to rounding. – Seidr Mar 06 '13 at 14:04
  • ..and implemented rounding in the 'step' function. – Seidr Mar 06 '13 at 14:37
0

Try

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

Here is a fiddle example

alexbusu
  • 701
  • 4
  • 13