.animateがとまらないのでいつまでも上下にシェイクしつづけてしまう。

Question

◯　解決したい課題

.animateがとまらないのでいつまでも上下にシェイクしつづけてしまう。

どこに何をかけば止まるのかでとまってしまっています。

---

◯　HTML

<div id="animation"> <input type="button" class="shake" value="押" onclick="RanRan();onclick='disabled = true;'"> </div>

◯　JS

function RanRan() {

document.getElementById("snd").load();
document.getElementById("snd").play();

$(".shake").one('click', function(){
//　1回だけ実行する
$({deg:0}).animate({deg:-135}, {
duration:1000,
progress:function() {
$('#animation').css({transform:'rotate(' + this.deg + 'deg)'})
.delay(1000)

			.animate({'marginTop': '5%'}, 100)
			.animate({'marginTop': '10%'}, 100)
			.animate({'marginTop': '5%'}, 100)
			.animate({'marginTop': '10%'}, 100)
			.animate({'marginTop': '5%'}, 100)
			.animate({'marginTop': '10%'}, 100)
			},
	});

---

input button　をクリックすると、
RanRanが実行され、sndでしていしているaudioがなります。

ここは問題ありませんので、sndもここには記載していません。

このあとの、

.shake　を実行したときに、
-135°　回転し、上下に3回ほどシェイクして、とめたいのですが
とまらずに、シェイクがつづきます。
delayが1秒あるので、1秒だけとまります。

どこかに何か記述を忘れているような気もするのですが、気づけずに困っています。

おわかりになるかたおられますでしょうか？

とまれば、CSSでもJQでもJSでも大丈夫です。

Answer 1

$({deg:0}).animate({deg:-135}, {

のところを

$({deg:0}).stop().animate({deg:-135}, {

としてみてください。