JQuery/Javascript Keyframes Animation: создание рулетки

Рейтинг: 0Ответов: 1Опубликовано: 03.03.2015

Здравствуйте.

Я пытаюсь сделать динамический спиннер. При нажатии на кнопку заработает spinner, после его остановки при нажатии на кнопку запустить с того места, где остановился.

Благодарю за помощь. :)))

code - http://codepen.io/DavidKern/pen/emjYzb

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Такой вариант устроит? Скорость замедлил для наглядности.

$(function () {
    var circle = $('#spin'),
        timer;
    circle.addClass('anime').css('animationPlayState', 'paused');
    $('.button').on('click', function () {
        var rTime = Math.floor(Math.random() * 5001) + 1000;
        if (circle.css('animationPlayState') === 'paused') {
            circle.css('animationPlayState', 'running');
            timer = setTimeout(function () {
                circle.css('animationPlayState', 'paused');
            }, rTime);
        } else {
            circle.css('animationPlayState', 'paused');
            clearTimeout(timer);
        }
    });
});