Demo by jquery-az.com
jQuery, CSS and HTML
<!DOCTYPE html> <html> <head> </head> <body> <div> <p>Click the image</p> <img id="animate-demo1" src="images/donut.png" alt="CSS 3 animation"> </div> <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="js/jquery-rotate/rotate.js"></script> <script> $('#animate-demo1').on('click', function () { if (!$(this).is(':animated')) { $(".complete").remove(); $(this).after("<div class='ani-status'>The image is animating</div>"); } $(this).rotate(-1500, { duration: 1500, easing: 'easeOutExpo', complete: function() { $(".ani-status").remove(); $(this).after("<div class='complete'>Animation is done!</div>"); } }); }); </script> </body> </html>
Click the image
