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
});
}
Written by soolaugust
Related protips
Have a fresh tip? Share with Coderwall community!
Post
Post a tip
Best
#Javascript
Authors
Sponsored by #native_company# — Learn More
#native_title#
#native_desc#