Hi, I'm new to jQuery and I'm trying to create different timed animations that run independently from each other, I found a really well made animation code and I adapted it for my needs. I have created an jsFiddle example to show the creation of the animations inside a list item. The problem I'm having is that if I click on one green timed circle, the others stop. I don't know how to instantiate them for each row...
Here is the jsfiddle:
JSFIDDLE
Some code:
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);
}
});
}
Select all Open in new window
Thanks in advance.
Maybe it is written as one time use... and you are trying to make it run multiple simultaneously...
which will require tons of change (passing id's to all functions etc)