.gif画像が再生されない場合があります。.pngから.gifに切り替えるとき

Question

私はスイッチを押したときにfan.gifが読み込まれ、再びスイッチを押してからfan.png画像が読み込まれるように、HTMLの.gif画像を扱います。ファンアニメーションが含まれています。私はファンをアニメーション化するために.gifイメージを使用しました。しかし、数秒後に私の.gifは動作しておらず、アニメーションが停止しました。

私のHTMLコードは以下の通りである：

<img id="foff" class="img-responsive ceiling-fan" src="img/foff.png" style=""/> 
<img id="fon" class="img-responsive ceiling-fan" src="img/animatedfan1.gif" style="opacity:0;"/> 

は私のjqueryのコードは以下の通りです：

$(function(){ 
var hit2 =0; 
$('#tfanonoff').click(function(){ 
if (hit2 % 2 !== 0) 
       { //for hits 2,4,6,8 
       $("#foff").animate({'opacity':'1'},1000); 
       $("#fon").animate({'opacity':'0'},1000); 
       } 
       else 
       { // for hits 1,3,5,7 
       $("#foff").animate({'opacity':'0'},1000); 
       $("#fon").animate({'opacity':'1'},1000); 

       } 
       hit2++; 
    return false; 

}); 
}); 

私のCSSは以下の通りです：

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

Answer 1

あなたがエラーを取得する必要がありますあなたのjqueryで使用しているIdが間違っているので、（あなたのコンソールで見てください）。 offおよびonではなく、foffおよびfonです。 hit1から1の値を初期化して、最初のクリック自体から効果が現れるようにします。以下試してみてください：

$(function(){ 
 
var hit1 =1; 
 
$('#aconoff').click(function(){ 
 
      if (hit1 % 2 !== 0) 
 
       { 
 
       $("#foff").css({'opacity':'0'},1000); 
 
       $("#fon").css({'opacity':'1'},1000); 
 
       } 
 
       else 
 
       { // for hits 1,3,5,7 
 
       $("#foff").css({'opacity':'1'},1000); 
 
       $("#fon").css({'opacity':'0'},1000); 
 
       } 
 
       hit1++; 
 
    return false; 
 

 
}); 
 

 
});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id="foff" class="img-responsive ceiling-fan" src="http://www.pngpix.com/wp-content/uploads/2016/04/Indoor-Ceiling-Fan-PNG-image.png" style=""/> 
 
<img id="fon" class="img-responsive ceiling-fan" src="https://media.giphy.com/media/cTx9LHAGm5nd6/giphy.gif" style="opacity:0;"/> 
 

 
<button id="aconoff">Switch</button>