Detener y reiniciar la animación CSS3

Tengo una animación CSS3 que se mueve al azar cuando hago clic en "Reproducir". El problema es que no he podido detener los empujones cuando hago clic en "Detener", que es lo que necesito lograr.

He intentado usar tanto la función "-webkit-animation-play-state" como la función jquery .stop() pero fue en vano. Creo que estoy cerca, pero parece que no puedo conseguir este.

He creado un jsFiddle y el código está debajo.

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

Ambas soluciones crean y usan una variable global. La ventaja de mi solución es que la variable global es de tipo booleano versus la respuesta de Sam usa una función como tipo de su global. Algo a tener en cuenta pero, por supuesto, ambos funcionarán. -

@frenchie: hay un problema grave con su respuesta. Nunca detienes el intervalo en tu código, solo evitas que haga algo. Esto significa que cada vez que hace clic en el botón "Inicio", genera un nuevo "hilo" de animación. Además, hacer clic en el botón de inicio activará todos los subprocesos en ejecución, lo que provocará una ralentización grave en la página si se detiene/inicia repetidamente. -

@frenchie: también, en mi respuesta, estoy almacenando un número, no una función. -

@SamDufel: me preguntaba si había alguna manera de evitar que la velocidad de los empujones se duplique cuando hago clic en reproducir dos veces. Gracias de nuevo. -

@Johan: lo editaré en mi respuesta a continuación:

1 Respuestas

La contraparte de setInterval() que se usa para detenerlo es clearInterval(). Cada llamada a setInterval() devuelve un ID de intervalo, que puede pasar a clearInterval() para detenerlo

Por lo tanto, deberá almacenar el resultado de setInterval()y bórrelo cuando haga clic en el botón detener.

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

¡Perfecto! Eres un salvavidas. - Johan

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