質問: アニメーションGIFをWEBページで表示させる際に 動画埋め込み再生風のデザインで実装したいと考えています。 jQueryを使い、以下の順番で実現したいのですが、一部うまくいきません。 1 静止画(01.jpg)を表示 2 静止画の上下左右中央に再生ボタン(#btnImg、03.png)が配置されています。 3 03.pngのボタンはマウスオーバーで透過状態に変化があったりカーソルが指アイコンになったりします。 4 再生ボタンをクリックするとアニメーションGIF(02.gif)が再生されます。 5 アニメーションGIF再生中はボタン(03.png)が消えます。 このとき、再生中のアニメーションGIF(02.gif)をクリックしてしまうと、 アニメーションが最初から再生されます。 クリックしても無視して再生が終了するようにしたいです。 02.gifそのものはループなしで設定されたアニメーションGIFで、 単体で表示する分には途中でクリックしても頭に戻ることはありません。 6 再生ボタンをクリックしてから指定時間(5秒)が過ぎると 1の静止画にボタンが乗っている状態に戻ります。 見にくくてすみません。 初心者で処理ごとに書かないと頭が混乱するので セレクタのthisやメソッドチェーンなど、ソースを省略することは あとでやりたいと思います。 ``` ``` ``` $(function() { $("#btnImg").css({ opacity: ".65" }); $("#btnImg").hover( function() { $(this) .stop() .animate({ opacity: "1" }); }, function() { $(this) .stop() .animate({ opacity: ".65" }); } ); $("#btnImg").css("cursor", "pointer"); $("#btnImg").on('click', function() { $("#changeImg").attr({ src: "02.gif" }); $("#btnImg").removeAttr("src"); $("#btnImg").css("cursor", "auto"); setTimeout(function() { $("#changeImg").attr({ src: "01.jpg" }); $("#btnImg").attr({ src: "03.png" }); $("#btnImg").css({ opacity: ".65" }); }, 5000); }); }); ``` clickを制御するものがないからかなと思い、 .on() .off()でできましたが、 これだけだとclickが1回きりになってしまい、クリックイベントの復活のさせ方がわかりません。 アニメーションGIF再生中はクリックしても何も起こらないが、 再生後は見た目上順番1に戻り、 再生ボタンが再びクリックできるようにしたいです。
回答: 以下のかたちでどうでしょう。 1. 実際の画像がないので、ダミー画像にしています。 2. ボタンにホバーした際のスタイルはCSSに写しました 3. 元々のCSSがないので、各要素の幅や高さなどのスタイルは仮のものにしています。 ``` ``` ``` .relative { position: relative; width: 200px; margin: 0 auto; } #changeImg { height: 200px; } #btnImg { position: absolute; top: 50%; left: 50%; display: block; margin: -50px 0 0 -50px; opacity: 0.65; cursor: pointer; transition: opacity 400ms; } #btnImg:hover { opacity: 1; } .relative.btn-hidden #btnImg { display: none; } ``` ``` $(function() { // 各要素を取得 var $outer = $('.relative'); var $img = $('#changeImg'); var $btn = $('#btnImg'); // ボタンをクリックした場合の処理を設定 $btn.on('click', function() { // 静止画のURLを取得(あとで戻せるように) var jpgSrc = $img.attr('src'); // GIFのURLをdata属性から取得 var gifSrc = $img.data('gif'); // 静止画をGIFに差し替え $img.attr('src', gifSrc); // ボタンを非表示に(クリックできなくする) $outer.addClass('btn-hidden'); // 5秒後に初期表示に戻るように setTimeout(function() { // GIFを静止画に差し替え $img.attr('src', jpgSrc); // ボタンを表示 $outer.removeClass('btn-hidden'); }, 5000); }); }); ```