2

「再生」をクリックするとランダムに動き回る 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>
4

1 に答える 1

2

setInterval()それを停止するために使用される対応するものは ですclearInterval()。への各呼び出しsetInterval()は間隔 ID を返します。これを渡してclearInterval()停止することができます。

そのため、 の結果を保存しsetInterval()、停止ボタンをクリックしたときにクリアする必要があります。

$(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-04T01:19:13.683 に答える