CODEWITHSUNDEEP
javascriptjqueryrotation
Mike P
Mike P

Reputation: 23

JQuery .stopRotate not working

I am working on a project to create a wheel of fortune type site for my job. I have successfully got a PNG wheel spinning continuously, however I can not get it to stop on button click. I have tried to clearInterval(interval), I have also tried .stopRotate(). Nothing has worked! This is getting to be frustrating. Any help would be greatly appreciated!

This is my JQuery code:

    var angle = 1;      //Set angle to move in 1 degree increments
    $(document).ready(function () {
        $("#spin").click(function () {
     setInterval(function () {
            angle += 5;         //keep angle increments at 5 degrees to keep moving
                $("#wheel").rotate(angle);
            });
        });
        $("#stop").click(function () {
            $("#wheel").stopRotate();
        });
    });

Upvotes: 2

Views: 190

Answers (1)

Sudharsan S
Sudharsan S

Reputation: 15403

Yup, You didn't stop the rotate functionality on setInterval. You need to Clear the setInterval using clearInterval in javascript

var angle = 1;      //Set angle to move in 1 degree increments
var timer;
    $(document).ready(function () {
        $("#spin").click(function () {
               timer = setInterval(function () {
                       angle += 5;         //keep angle increments at 5 degrees to keep moving
                $("#wheel").rotate(angle);
              });
        });
        $("#stop").click(function () {
            clearInterval(timer);
        });
    });

Upvotes: 1

Related Questions