clusterBuddy clusterBuddy - 28 days ago 7
jQuery Question

trying to pass a value dynamically into an input element

I am using this JQuery gauge.

I am trying to create some sort of set animation, so i.e. 100 then after 300ms show 97, then after 200ms show 110, etc.

I would like to be totally undependable on that input field (it would be thrown out at one point), So how would I able to just use an array of set numbers with a constant delay where the animation plays out the speed based on the numbers in the array and delaying after each number by the delay constant (let's say 300ms.)

Thanks.

I've tried to select the element and apply a set value like this:

$("#myValues").myfunc({divFact:20,eventListenerType:'keyup'}).val(100)
, but it just places the number there with no result, it's using
eventListenerType:'keyup'
and my val function is def. not sending a keyup after the 100.

Here is a Fiddle

Answer

You can iterate over an array and set the value of the input field depending of the value in the index:

$("#myValues").myfunc({
  divFact: 10
});

var time = 0;
$.each([ 100, 90, 80, 70 ], function( index, value ) {
 setTimeout( function(){ $("#myValues").val(value).change(); }, time)
 time += 1000;
});

To delay each iteration you could use a setTimeout-function wrapped around the setter of the value.

I removed the keyUp event as the plugin has a default value for eventListenerType you can use, but this has to be triggered.

Set the initial value of time to any value you want when you want to delay the first iteration as well.

Example

Comments