3

I am having trouble animating jquery knob. As you can see in my example only the last one animates.

<input class="knob nummer1 animated" value="0" rel="64">
       <input class="knob nummer2 animated" value="0" rel="77">
       <input class="knob nummer3 animated" value="0" rel="99">

link

Johansrk
  • 5,160
  • 3
  • 38
  • 37

1 Answers1

5

local $this object was not getting set for every new instance of knob,instead same this object was referenced each time.

so what you need to do is create a new local reference of this object for every knob instance.

var $this = $(this);

Live Demo @ JSFiddle

JS CODE:

     $('.knob').each(function() {
       var $this = $(this);
       var myVal = $this.attr("rel");
       $this.knob({
       });
       $({
          value: 0
       }).animate({
          value: myVal
       }, {
          duration: 2000,
          easing: 'swing',
          step: function() {
             $this.val(Math.ceil(this.value)).trigger('change');
          }
       });
   });
dreamweiver
  • 6,002
  • 2
  • 24
  • 39
  • thanks. Quite close, but I want whole numbers in the animation – Johansrk May 07 '13 at 11:06
  • @Johansrk: i didnt get you ? wht do you mean by whole numbers in animation mean ? – dreamweiver May 07 '13 at 11:08
  • during the animation, the numbers are not whole. It seems like "ceil", does not work – Johansrk May 07 '13 at 11:13
  • @Johansrk: more than you this bugged me alot bro, you know what was the mistake , ` $this = $(this);` **$this** here was not getting updated so when i changed it like this ` var $this = $(this);` it worked.can u believe this was the error. – dreamweiver May 07 '13 at 12:36