Avatar of claire89
claire89
 asked on

Issue with timed animation

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);
         }
     });
 }

Open in new window


Thanks in advance.
jQueryJavaScriptCSS

Avatar of undefined
Last Comment
claire89

8/22/2022 - Mon
HainKurt

looks nice :) but are you sure this is intended to run multiple instances?
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)
claire89

ASKER
I would like it to run multiple instances but i lack the knowledge to do so :)
Kyle Hamilton

Please update the fiddle. It is not loading.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Rob

The fiddle wasn't loading due to the jsfiddle website having issues.

To instantiate you'll need to wrap this up in a class that you can separate with the "new" operator

https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_13138-Javascript-is-just-an-Object.html

Working on something for you now.
claire89

ASKER
Thanks really apreciate the help
ASKER CERTIFIED SOLUTION
Rob

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
claire89

ASKER
Many thanks :)
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.