I have been using the following code to simulate a spinning wheel for users. It is functional, but I am facing an issue where the rotation stops abruptly at a specific circle before applying the style for the winning circle.
My query is: Is there any way to slow down the spin rotation and ensure that it lands on the winner smoothly, rather than jumping to the winning number after stopping? I want the wheel to continue spinning until it naturally falls on the winning number.
$(function() {
var current = 1;
var num = 0;
var max = $('.jackpot').length + 1;
var rotate = 5;
var speed = 80;
function change() {
var winner = Math.floor((Math.random() * 12) + 1);
$('.jack-' + current).toggleClass("active-spin spin-default");
current++;
if (current == max) {
current = 1;
num++;
}
if (num == 3) {
speed = 160;
}
if (num != rotate) {
setTimeout(function() {
change()
}, speed);
} else {
$('.jackpot').removeClass("active-spin").addClass("spin-default");
$('.jack-' + winner).addClass("iswin");
current = winner;
num = 0;
}
}
$('.play').click(function(event) {
$('.jackpot').removeClass("iswin").addClass('spin-default');
setTimeout(function() {
change()
}, speed);
});
});.jackpot {
display: inline-block;
padding: 10px;
margin: 10px;
border-radius: 50%;
border: 1px solid transparent;
transition: 0.5s;
}
.spin-default {
border: 1px solid orange;
background-color: #eee;
}
.jackpot.active-spin {
border: 1px solid blue;
background-color: red;
}
.jackpot.iswin {
border: 1px solid yellow;
background-color: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<table>
<tr>
<td>
<div class="jackpot spin-default jack-1">JK</div>
...
</div>
</td>
</tr>
</table>
</div>
<button class="play">PLay</button>