Здравствуйте, господа и дамы. Возникла проблема: при воспроизведении при нажатии на кнопку анимация подтормаживает (а именно прыгает к первой картинке и визуально начинает прокрутку с первой картинки). Также, чаще всего рандом выбирает только 1 картинку, некоторые и вовсе не выбирает (проверено в районе 100 кручений)
Буду очень рад Вашей помощи)
Вот собственно сам код:
<head>
...
<script>
jQuery.easing['easeOutCirc'] = function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
$(function() {
var option = {
speed: 2,
duration: 3,
stopImageNumber: 4
};
$("#go").click(function() {
$('#go').prop('disabled', true);
option.stopImageNumber = Math.random() * 11|0;
$(".roulette-inner img").removeClass("active");
$("#config").text(JSON.stringify(option));
$({
left: 0
}).animate({
left: 844 * option.speed + 7 * (option.stopImageNumber + 6)
}, {
duration: option.duration * 1000,
easing: "easeOutCirc",
step: function(a) {
$(".roulette-inner").css("transform", "translateX(-" + a % 844 + "px)");
},
complete: function() {
$(".roulette-inner img").eq(option.stopImageNumber + (option.stopImageNumber < 6) * 11).addClass("active");
$('#go').prop('disabled', false);
}
});
})
});
</script>
</head>
<body>
<div class="roulette" style="overflow: hidden; height: 300px; width: 1000px;">
<div class="roulette-inner" style="position: relative; top: 24px; width: 10000px;">
<img src="images/1.png" style="display: block; float: left;">
<img src="images/2.png" style="display: block; float: left;">
<img src="images/3.png" style="display: block; float: left;">
<img src="images/4.png" style="display: block; float: left;">
<img src="images/5.png" style="display: block; float: left;">
<img src="images/6.png" style="display: block; float: left;">
<img src="images/7.png" style="display: block; float: left;">
<img src="images/8.png" style="display: block; float: left;">
<img src="images/9.png" style="display: block; float: left;">
</div>
</div>
</br>
<div class=button style="position: relative; height: 150px; wigth: 1000px;">
<button id="go" onclick="play()" class="btn btn-primary py-3 px-4">Lets Start</button>
</div>
...
</body>