Last Updated: February 01, 2019
·
1.878K
· soolaugust

Create Loop Animation with JavaScript

Sometimes we need create a loop animation, of course, we could implement it with other plugins, we could also use oringinal JavaScript :

demo.html

...
<div class="animation">
    ...
</div> 

<div class="start"></div> // start button
<div class="stop"></div> // end button
...

demo.js

var internal; // this is for stop animation manually

Jquery('.start').on('click', function() {
    var end_status = {opacity:'0.5'};  // end status of one animation
    internal = setInterval(function() {
        $('.animation').animate(css_chison_robot, 200, function() {
            if(end_status.opacity==='0.5') end_status.opacity = '1';  // after one animation end, back to start status 
            else end_status.opacity='0.5';
        })
    }, 200);
})

Jquery('.stop').on('click', function() {
    clearInterval(internal);
    $('.animation').animate({
        opacity:'1' // after manully stop, status should be reset
    });
}