web-dev-qa-db-ja.com

.gif画像を一時停止することはできますか？

.gifアニメーションにカーソルを合わせたときに開始し、カーソルを合わせていないときに一時停止することはできますか？画像にカーソルを合わせるのをやめたときに、画像をアニメーションの最初にリセットしたくありません。

編集：助けてくれてありがとう、しかし私が望んでいたように何もうまくいきませんでした。私がこれに対して見つけた最良の解決策はこれでした：

HTML：

<img id="gif1" src="static1.jpg">

JS：

$("#gif1").hover(
    function() {
        $(this).attr("src", "animate1.gif");
    },
    function() {
        $(this).attr("src", "static1.jpg");
    }                         
);

だから、リセットするだけです。

javascriptjqueryhtmlcssgif
7
wbjari

考えられる解決策の1つは、静止画像とアニメーションGIFの2つの画像を作成することです。次に、ホバーしたときにsrcを変更します（ここで説明されているように： https://stackoverflow.com/a/5818049/1845408 ）。

プラグインもあり、この目的でこれを使用できます： https://github.com/chrisantonellis/freezeframe

このプラグインは、上記のロジックをより適切に適用していると思います。

ただし、本当にアニメーションを一時停止したい場合は、アニメーションを構築する一連の画像を用意し、マウスオーバー時に事前設定された順序で画像を移動し、マウスを外したときに一時停止して、最後に一時停止した画像を記録する必要があります。これはここに実装されました： https://stackoverflow.com/a/20644622/1845408クリックしてデモ

6
renakre