他のGIFが読み込まれると、Gifがもう一度起動します！なぜ私はドン？

Question

私はいくつかのボタン/ img、データベース内のアイテムのステータスを表示します。ホバリング時にsrcがgifに変更され、アニメーション部分の後で終了します。他のGIFが来たら、離れるときに。私が最初のボタンを入力して去ったときに、別のボタンで同じことをした場合、2回目を離れると、2つのgifのすべてが新しいものになります。 2倍以上も同じことが起こります。ここで

例： enter image description here

function lightimgchange (ID, Val) { 
 
\t \t var imgID = 'light' + ID; 
 
\t \t var elem = document.getElementById(imgID); 
 
\t \t if (Val == 1) { 
 
\t \t \t elem.src = "img/light_on_off.gif"; 
 
\t \t } 
 
\t \t else { 
 
\t \t \t elem.src = "img/light_off_on.gif"; 
 
\t \t } 
 
}

while ($reihe = mysql_fetch_array($light_db)) { 
 
\t \t if ($reihe['Status'] == 'Y') { 
 
    \t \t echo "<img src='img/light_on.png' alt='On' id='light".$reihe['ID']."' height='75px' width='75px' onmouseenter='lightimgchange(".$reihe['ID'].", 1)' onmouseleave='lightimgchange(".$reihe['ID'].", 0)' style='border-radius:20%;'>"; 
 
\t \t } 
 
\t \t else { 
 
\t \t echo "<img src='img/light_off.png' alt='Off' id='light".$reihe['ID']."' height='75px' width='75px' onmouseenter='lightimgchange(".$reihe['ID'].", 0)' onmouseleave='lightimgchange(".$reihe['ID'].", 1)' style='border-radius:20%;'>"; 
 
\t \t } 
 
}

Answer 1

I`veはトリックでそれを解決しました。終了後、私はgifをpngに変更します。

Here`s JSソリューション：

function lightimgchange (ID, Val) { 
    var imgID = 'light' + ID; 
    var elem = document.getElementById(imgID); 
    if (Val == 1) { 
     elem.src = "img/light_on_off.gif"; 
     setTimeout(function(){ 
      elem.src = "img/light_off.png"; 
     }, 450); 
    } 
    else { 
     elem.src = "img/light_off_on.gif"; 
     setTimeout(function(){ 
      elem.src = "img/light_on.png"; 
     }, 450); 
    } 
}