.gifアニメーションにカーソルを合わせたときに開始し、カーソルを合わせていないときに一時停止することはできますか?画像にカーソルを合わせるのをやめたときに、画像をアニメーションの最初にリセットしたくありません。
編集:助けてくれてありがとう、しかし私が望んでいたように何もうまくいきませんでした。私がこれに対して見つけた最良の解決策はこれでした:
HTML:
<img id="gif1" src="static1.jpg">
JS:
$("#gif1").hover(
function() {
$(this).attr("src", "animate1.gif");
},
function() {
$(this).attr("src", "static1.jpg");
}
);
だから、リセットするだけです。
考えられる解決策の1つは、静止画像とアニメーションGIFの2つの画像を作成することです。次に、ホバーしたときにsrc
を変更します(ここで説明されているように: https://stackoverflow.com/a/5818049/1845408 )。
プラグインもあり、この目的でこれを使用できます: https://github.com/chrisantonellis/freezeframe
このプラグインは、上記のロジックをより適切に適用していると思います。
ただし、本当にアニメーションを一時停止したい場合は、アニメーションを構築する一連の画像を用意し、マウスオーバー時に事前設定された順序で画像を移動し、マウスを外したときに一時停止して、最後に一時停止した画像を記録する必要があります。これはここに実装されました: https://stackoverflow.com/a/20644622/1845408クリックしてデモ