Clash Royale CLAN TAG#URR8PPP

Repeat a function infinite times

How can I repeat the animate function below infinite times? What is the best way to do it?

animate

function animate(count)

if (count == 0)
$('.path').css(
'animation': 'draw2 4s'
);


if (count == 1)
$('.path').css(
'animation': 'draw1 4s'
);


if (count == 2)
$('.path').css(
'animation': 'draw3 4s'
);


if (count > 0) $('.path:first').one("animationend", function ()
animate(count - 1)
);



else

else animate(2);

3 Answers
3

I think your function can be built in infinitely, Also use switch and cache of jQuery selection:

switch

jQuery

function animate(count)

var path = $('.path');

while (true)
switch (count)
case 0 :
path.css(
'animation': 'draw2 4s'
);
break;
case 1:
path.css(
'animation': 'draw1 4s'
);
break;
case 2:
path.css(
'animation': 'draw3 4s'
);
break;
default:
path.first().one("animationend", function ()
animate(count - 1)
);





animation

You can do it by using setInterval() function, you need to pass 2 parameters a function and time in Miliseconds to repeat that function,example:

2

function

time

var funcRepeat = animate("something");
var interval = setInterval(funcRepeat,1000);
//This will repeat your function once per second,
// with 500 as value will be twice per second, 250 > 4, etc


If you want to clear the interval, (thats why I stored it in a variable):

clearInterval(interval);


You could also make the funcion inside it:

var interval = setInterval(function()
// code
,1000);


UPDATE

Looking at your comments, you could simply use recursivity with setTimeout() function:

$(document).ready(function ()

function animate()
// launch the first animation
$('.path').css('animation': 'draw2 4s' );
// wait 4s
setTimeout(function()
// Launch the second animation
$('.path').css('animation': 'draw1 4s');
// wait another 4s
setTimeout(function()
//launch the last one
$('.path').css('animation': 'draw3 4s');
// finnaly wait 4s for the last one to complete
// and start again the function using recursivity
setTimeout(animate(),4000);
,4000);
,4000);


animate();

);

background-color: #fff;
}

.crosshair
cursor: crosshair;


.bg
width: 40%;
margin-left: auto;
margin-right: auto;


.path
animation-fill-mode: forwards;
animation-iteration-count: 3;


@keyframes draw1
0%
stroke: green;

25%
stroke: green;

50%
stroke: green;

75%
stroke: green;

100%
stroke: green;
fill: none;
stroke-dashoffset: 100;



@keyframes draw2
0%
stroke: red;

25%
stroke: red;

50%
stroke: red;

75%
stroke: red;

100%
stroke: red;
fill: none;
stroke-dashoffset: 100;



@keyframes draw3
0%
stroke: blue;

25%
stroke: blue;

50%
stroke: blue;

75%
stroke: blue;

100%
stroke: blue;
fill: none;
stroke-dashoffset: 100;



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="612px" height="792px" viewbox="0 0 612 792" enable-background="new 0 0 612 792"
xml:space="preserve">
<path class="path" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M240,260c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V260z"/>
<path class="path" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M271,296c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V296z"/>
<path class="path" fill="none" stroke-width="1" stroke-dasharray="550" stroke-dashoffset="550" d="M306,346c0,6.627-5.373,12-12,12h-76c-6.627,0-12-5.373-12-12v-76
c0-6.627,5.373-12,12-12h76c6.627,0,12,5.373,12,12V346z"/>
</svg>

I can do that with an else condition

$('.path:first').one("animationend", function ()
if (count > 0)
animate(count - 1)
else
animate(iterationcount - 1)

)
}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.