Остановить и перезапустить анимацию CSS3

У меня есть анимация CSS3, которая толкается случайно, когда я нажимаю «Играть». Проблема в том, что я не смог остановить толчок, когда я нажимаю «Стоп», что мне нужно выполнить.Остановить и перезапустить анимацию CSS3

Я попытался использовать как «-webkit-animation-play-state», так и функцию jquery .stop(), но безрезультатно. Я думаю, что я близка, но просто не могу, похоже, получить этот.

Я создал jsfiddle и код ниже.

Заранее благодарен!

<html> 
<head> 
<style> 
#sec { 
    background: url(http://placekitten.com/200/200); 
    background-repeat:no-repeat; 
    z-index: 3; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    top: 45px; 
    left: 105px; 
} 
</style> 
<script> 
$(document).ready(function(){ 
    $("#play-bt").click(function(){ 
     setInterval(function() { 
     var seconds = Math.random() * -20; 
     var sdegree = seconds * 2 ; 
     var num = -30; 
     var together = num + sdegree; 
     var srotate = "rotate(" + together + "deg)"; 
     $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); 
     }, 100); 
     }); 

    $("#stop-bt").click(function(){ 
      $("#sec").stop(stopAll); 
     }) 

}) 
</script> 
</head> 
<body> 
<div id="sec"></div> 
<br/> 
<div id="play-bt">Play</div> 
<br/> 
<div id="stop-bt">Stop</div> 
</body 
</html>

источник

2012-07-04 Johan

Оба решения создают и используют глобальную переменную. Преимущество моего решения состоит в том, что глобальная переменная имеет тип boolean или ответ Сэма, который использует функцию как тип ее глобального. Что-то рассмотреть, но, конечно, оба будут работать. – frenchie

@frenchie - есть серьезная проблема с вашим ответом. Вы никогда не останавливаете интервал в своем коде, вы просто не позволяете ему ничего делать. Это означает, что каждый раз, когда вы нажимаете кнопку «начать», вы создаете новую «нить» анимации. Кроме того, нажатие кнопки «Пуск» активирует все запущенные потоки, что приведет к серьезному замедлению на странице, если вы остановите/начнете несколько раз. –

@frenchie - также, в моем ответе я храню число, а не функцию. –

Аналог setInterval(), который используется, чтобы остановить это clearInterval(). При каждом вызове setInterval() возвращается идентификатор интервала, который вы можете пройти до clearInterval(), чтобы остановить его.

Итак, вам нужно сохранить результат setInterval() и очистить его, когда вы нажмете stop btn.

$(document).ready(function(){ 
    var animation = null; 
    $("#play-bt").click(function(){ 
     if (animation !== null) {  // Add this if statement to prevent 
     return;      // doubled animations 
     } 
     animation = setInterval(function() { 
     var seconds = Math.random() * -20; 
     var sdegree = seconds * 2 ; 
     var num = -30; 
     var together = num + sdegree; 
     var srotate = "rotate(" + together + "deg)"; 
     $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); 
     }, 100); 
     }); 

    $("#stop-bt").click(function(){ 
      //$("#sec").stop(stopAll); 
     if (animation !== null) { 
      clearInterval(animation); 
      animation = null; 
     }   
    }); 

});

источник

2012-07-04 01:19:13

Отлично! Ты спасатель жизни. – Johan

Остановить и перезапустить анимацию CSS3

ответ

Смежные вопросы