Detener y reiniciar la animación CSS3

I have a CSS3 animation that jostles around at random when I click "Play". The problem is that I have been unable to stop the jostling when I click "Stop" which what I need to accomplish.

I have tried to use both the "-webkit-animation-play-state" and the jquery .stop() function but to no avail. I think I am close but just can't quite seem to get this one.

He creado un jsFiddle and the code is below.

Gracias de antemano!

<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>

preguntado el 04 de julio de 12 a las 02:07

Both solutions create and use a global variable. The advantage of my solution is that the global variable is of type boolean versus Sam's answer uses a function as the type of its global. Something to consider but of course, both will work. -

@frenchie - there is a serious problem with your answer. You never stop the interval in your code, you just prevent it from doing anything. This means that every time you click the 'start' button, you spawn a new animation "thread". Also, clicking the start button will activate all running threads, which will cause some serious slowdown on the page if you stop/start repeatedly. -

@frenchie - also, in my answer I'm storing a number, not a function. -

@SamDufel - I was wondering if there was a way with this to prohibit the speed of the jostling from doubling when I click play twice. Thanks again. -

@Johan - I'll edit it into my answer below -

1 Respuestas

La contraparte de setInterval() which is used to stop it is clearInterval(). Cada llamada a setInterval() devuelve un ID de intervalo, que puede pasar a clearInterval() para detenerlo

So, you'll need to store the result of setInterval(), and clear it when you click the 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;
        }           
    });

 }); 

Respondido 09 Jul 12, 23:07

Perfect! You're a life saver. - Johan

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.