GIF がたくさんあるページがあります。
<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >
私が探しているもの
1 ページの読み込み時にすべてのGIFのアニメーションが停止されます
2 マウスオーバーすると => そのGIFのアニメーションが始まります
3 マウスアウトすると => そのGIFのアニメーションが再び停止します
これは Jquery で実行できると思いますが、方法がわかりません。
ベストアンサー1
いいえ、画像のアニメーションを制御することはできません。
各画像には、アニメーション化されたバージョンとアニメーション化されていないバージョンの 2 つのバージョンが必要です。マウスをホバーすると、簡単に画像を切り替えることができます。
例：
$(function(){
$('img').each(function(e){
var src = $(e).attr('src');
$(e).hover(function(){
$(this).attr('src', src.replace('.gif', '_anim.gif'));
}, function(){
$(this).attr('src', src);
});
});
});
アップデート：
時間が経つと、可能性は変化します。kritzikatzi が指摘したように、2 つのバージョンの画像を持つことが唯一の選択肢ではなく、キャンバス要素を使用してアニメーションの最初のフレームのコピーを作成できるようです。これはすべてのブラウザーで機能するわけではないことに注意してください。たとえば、IE 8 はキャンバス要素をサポートしていません。