jquery - Javascript - Click to rotate image infinitely and click again to stop -
i've been trying figure out how script rotate image infinitely onclick , stop when click again. can modify that?
$(function() { var $rota = $('.spin'), degree = 0, timer; function rotate() { $rota.css({ transform: 'rotate(' + degree + 'deg)'}); // timeout increase degrees: timer = settimeout(function() { ++degree; rotate(); // loop },5); } rotate(); // run it! });
you create bool determine if element has been clicked, change on click , stop process if click has happened.
$(function() { var $rota = $('.spin'), degree = 0, clicked = false, timer; $rota.on('click', function() { clicked = true; return false; } ); function rotate() { if ( clicked ) $rota.css({ transform: 'rotate(' + degree + 'deg)'}); // timeout increase degrees: timer = settimeout(function() { ++degree; rotate(); // loop },5); } rotate(); // run it! });
Comments
Post a Comment