前提・実現したいこと
jQueryで1の画像をクリックしたら2の画像(ループしない1回だけのGIFアニメ)に切り替え、その後1の画像に自動で戻す。ということをやりたいです。
戻したら、初期状態といいますか、またクリックで2の画像に
切り替えられるようにしたいです。
イメージとしては
1の画像は空のコップの絵、
2の画像は空のコップに水が注がれ満杯の状態の絵で静止。
そのままではコンテンツの内容上困るので空のコップの絵に戻したい。
といった感じです。
※あくまで例で、実際はコップの絵ではありません。
2のGIFアニメーションの再生が終わったら
1の画像に戻る。という見た目になればどういう方法でもよいです。
該当のソースコード
html
1<html> 2<head> 3<script src="./jquery-3.2.1.min.js"></script> 4<script src="./test.js"></script> 5</head> 6<body> 7<img id="changeImg" src="01.gif"> 8</body> 9</html>
jquery
1$(function(){ 2 3$('#changeImg').click(function() { 4$(this).attr({'src': '02.gif'}); 5}); 6 7});
試したこと
1の画像を2の画像に切り替えるところまで。
setTimeoutやwhen&doneなど試してみましたが、
初心者なのでよくわかりませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。