实例化动画对象

Question

我是javascript和jQuery手机的新手，我正在开发和需要独立运行多个动画的应用程序，我发现了一个非常酷的动画代码我需要它，它显示了一个馅饼计时器倒计时，问题是我缺乏jQuery的经验和知识，我不知道如何为这段代码实例化新对象。

以下是代码：

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(globalForPieTimer);
            if (!data) {
                $this.addClass(globalForPieTimer);
                $this.css({
                    fontSize: $this.width()
                });
                $this.data(globalForPieTimer, state);
                if (state.showPercentage) {
                    $this.find('.percent').show();
                }
                if (state.fill) {
                    $this.addClass('fill');
                }
                $this.pietimer('start');
            }
        });
    },

    stopWatch: function () {

        var data = $(this).data(globalForPieTimer);
        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(globalForPieTimer);
        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(globalForPieTimer);
        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(globalForPieTimer);
        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(temp) {

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

先谢谢。

更新：

当我创建2个定时器时，如果我点击其中一个定时器停止运行，我该如何实例化定时器才能独立工作？

jsfiddle：enter link description here