jqueryのdelayは1度だけ？

Question

このようなコードを作りました。

概要は、

$("#play").click(function() {
	playDelayPreview();
});

function playDelayPreview() {

	$("#play").attr('src','playing.png');
	$('#play').delay(4000).queue(function(){
		$("#play").attr('src','play.png');
	});

}

概要は、

				<img src="play.png" class="hand" id="play">

というHTMLがあるのですが、このimgをクリックしたときにplay.pngがplaying.pngに変化して4秒後に、また元のplay.pngに戻るというコードです。

要は、これは1回目はうまく動くのですが、（そのページをリロードなどしないで）2回目に押すと、playing.pngに変化はするのですが、4秒後に元のplay.pngに戻らないのです。

これを解決する方法はありますでしょうか？

Answer 1

.dequeue() が必要みたいです。

function playDelayPreview() {

    $("#play").attr('src','https://placehold.jp/24/9999cc/333399/350x150.png?text=playing.png');
    $('#play').delay(1000).queue(function(){
        $("#play").attr('src','https://placehold.jp/24/99cc99/339933/350x150.png?text=play.png').dequeue();
    });
}
```**動くサンプル：**[https://jsfiddle.net/d8sfy1am/](https://jsfiddle.net/d8sfy1am/)

---


【.dequeue() | jQuery API Documentation】
[http://api.jquery.com/dequeue/](http://api.jquery.com/dequeue/)

Comments

[HisashiSakamoto]

ありがとうございました。
$(this).dequeue();
で解決しました。