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