jQuery Rotate prevent stacking function after a click

Question

fiddle link

Hello, I am using this jQueryRotate plugin to rotate my div's after a user clicks on the button.

I would like to stop stacking the rotation after the button is clicked more than once. It just keeps on speeding up.

I have researched it and using .stop() nor return false; wont help. All I want is to know, whether there is a way to reset the rotation on the next click, or stop it after clicking on another button. Thanks a lot!

Answer 1

The glitch came from having the declaration multiple times in the loop. I pulled the variables outside the click event which stopped the glitch.

To prevent the speed increasing, i did a quick check to see if the button had already been clicked. See below

$(document).ready(function () {
    var angle = 0
    var angleone = 0;
    var clicked = false;
    $('.concept').click(function () {
        if (!clicked) {
            setInterval(function () {
                angle += 3;
                $(".gear").rotate(angle);
            }, 50);

            setInterval(function () {
                angleone -= 3;
                $(".gear-one").rotate(angle);
            }, 50);
            clicked = true;
        }
    });
    $('.bar').click(function () {
        if ($('#default').is(':visible')) {
            $('#default').fadeOut(200);
        };
    });
});