私のアニメーションGIFは、すべてのブラウザ

Question

私は天井ファンのアニメーションを扱っていますし、ファンがオフとgif画像である場合、それは上だとき、私はpng画像を使用で2分後に動作を停止します。

画像が正常に切り替えられ、gifが表示され、ファンがであることがに示されます。しかし、2分後に私のgifファイルはすべてのブラウザで動作しなくなりました。

どうすれば解決できますか？

は、ここに私のコードです：

$(function() { 
 
\t var hit2 = 0; 
 
\t $('#tfanonoff').click(function() { 
 
    \t if (hit2 % 2 !== 0) { 
 
      $("#foff").fadeIn().animate({'display':'inline-block'},1000); 
 
    \t \t $("#fon").fadeOut(1000); 
 
    \t } else { 
 
    \t \t $("#foff").fadeOut().animate({'display':'none'},1000); 
 
    \t \t $("#fon").fadeIn().animate({'display':'inline-block'},1000); 
 
     } 
 
     hit2++; 
 
     return false; 
 
\t }); 
 
});

.ceiling-fan { 
 
    max-width: 20%; 
 
    display: inline-block; 
 
    text-align: center; 
 
    left: 41%; 
 
    position: absolute; 
 
    transform: rotateX(-58deg); 
 
}

<img id="foff" class="img-responsive ceiling-fan" src="img/fanoff.png" alt="static-img" /> 
 
<img id="fon" class="img-responsive ceiling-fan" loop=infinite src="http://animationsa2z.com/attachments/Image/fans/ventilator4.gif" 
 
    style="display:none;" />

Answer 1

問題がGIFがループ停止する前interationsの有限数に設定されていることです。無限の反復数になるようにgif​​を再作成する必要があります。

Answer 2

私はあなたのgif画像でループを追加した私は `ループ= infinite`属性は、今のよう推奨されていませんと信じURL

https://i.imgsafe.org/8b8138e463.gif