Проблема с временной анимацией

Question

Я пытаюсь создать разные timed анимации, которые работают независимо друг от друга, я нашел действительно хорошо продуманный код анимации, и я адаптировал его для своих нужд. Я создал пример jsFiddle, чтобы показать создание анимаций внутри элемента списка. Проблема, с которой я сталкиваюсь, заключается в том, что если я нажму на один зеленый круг, остальные остановятся. Я не знаю, как их экземпляры для каждой строки ...

Вот jsfiddle: JSFIDDLE

Некоторый код:

var methods = { 
    init: function (options) { 
     var state = { 
      timer: null, 
      timerSeconds: 60, 
      callback: function() {}, 
      timerCurrent: 0, 
      showPercentage: false, 
      fill: false, 
      color: '#CCC' 
     }; 

     state = $.extend(state, options); 

     return this.each(function() { 
      var $this = $(this); 
      var data = $this.data('pietimer'); 
      if (!data) { 
       $this.addClass('pietimer'); 
       $this.css({ 
        fontSize: $this.width() 
       }); 
       $this.data('pietimer', state); 
       if (state.showPercentage) { 
        $this.find('.percent').show(); 
       } 
       if (state.fill) { 
        $this.addClass('fill'); 
       } 
       $this.pietimer('start'); 
      } 
     }); 
    }, 

    stopWatch: function() { 

     var data = $(this).data('pietimer'); 
     if (data) { 
      var seconds = (data.timerFinish - (new Date().getTime()))/1000; 
      if (seconds <= 0) { 
       clearInterval(data.timer); 
       $(this).pietimer('drawTimer', 100); 
       data.callback(); 
      } else { 
       var percent = 100 - ((seconds/(data.timerSeconds)) * 100); 
       $(this).pietimer('drawTimer', percent); 
      } 
     } 
    }, 

    drawTimer: function (percent) { 

     $this = $(this); 
     var data = $this.data('pietimer'); 
     if (data) { 
      $this.html('<div class="percent"></div><div class="slice' + (percent > 50 ? ' gt50"' : '"') + '><div class="pie"></div>' + (percent > 50 ? '<div class="pie fill"></div>' : '') + '</div>'); 
      var deg = 360/100 * percent; 
      $this.find('.slice .pie').css({ 
       '-moz-transform': 'rotate(' + deg + 'deg)', 
        '-webkit-transform': 'rotate(' + deg + 'deg)', 
        '-o-transform': 'rotate(' + deg + 'deg)', 
        'transform': 'rotate(' + deg + 'deg)' 
      }); 
      var secs = (data.timerSeconds) * ((100 - percent)/100); /*NEW*/ 
      $this.find('.percent').html(Math.round(secs) + ''); /*Changed*/ 
      if (data.showPercentage) { 
       $this.find('.percent').show(); 
      } 
      if ($this.hasClass('fill')) { 
       $this.find('.slice .pie').css({ 
        backgroundColor: data.color 
       }); 
      } else { 
       $this.find('.slice .pie').css({ 
        borderColor: data.color 
       }); 
      } 
     } 
    }, 

    start: function() { 

     var data = $(this).data('pietimer'); 
     if (data) { 
      data.timerFinish = new Date().getTime() + (data.timerSeconds * 1000); 
      $(this).pietimer('drawTimer', 0); 
      data.timer = setInterval("$this.pietimer('stopWatch')", 50); 
     } 
    }, 

    reset: function() { 
     console.log("flag 4"); 
     var data = $(this).data('pietimer'); 
     if (data) { 
      clearInterval(data.timer); 
      $(this).pietimer('drawTimer', 0); 
     } 
    } 
}; 

$.fn.pietimer = function (method) { 

    if (methods[method]) { 
     return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); 
    } else if (typeof method === 'object' || !method) { 
     return methods.init.apply(this, arguments); 
    } else { 
     $.error('Method ' + method + ' does not exist on jQuery.pietimer'); 
    } 
}; 



function runTimer() { 

    $('.timer').pietimer({ 
     timerSeconds: 60, 
     color: '#ccc', 
     fill: '#ccc', 
     showPercentage: true, 
     callback: function() { 
      console.log("flag 7"); 
      // alert("yahoo, timer is done!"); 
      $('.timer').pietimer('reset'); 
      $this.find('.percent').html(0); 
     } 
    }); 
} 

Спасибо заранее.

Answer 1

Найдено решение, это здесь для тех, кто хотел бы это :)

LINK: JSBIN