2つのGIF画像を切り替えるときに瞬きを避ける方法は？

Question

this animation of a incineration plantでは、訪問者が番号付きボタンを転がると、最初のimgが非表示になり、別のimgが表示されます。 表示するすべての画像がプリロードされています。

<script type="text/javascript"> 
var rep = HOTE + 'images/visites-dechets/uiom-kva-2/'; 

var imagesOver = new Array(
    'uiom-kva-1.gif', 
    'uiom-kva-2.gif' 
/* others images...*/ 
); 

window.onload = function() { 
    preloadImages(rep, imagesOver); 
    preloadFlag = true; 
} 

var prev_img = ''; 

function switchImg(sh, hi) { 
    jQuery("#" + sh).show(); 
    jQuery("#" + hi).hide(); 
} 
</script> 
<div id="uiom" style="text-align: center;"> 
<img src="/images/visites-dechets/uiom-kva-2/uiom-kva.gif" id="img_usine" alt="" width="1000" height="600" usemap="#uiom-kva" style="height: auto; max-width: 100%;" /> 
<img src="/images/visites-dechets/uiom-kva-2/uiom-kva-1.gif" id="img_usine1" alt="" width="1000" height="600" usemap="#uiom-kva" style="height: auto; max-width: 100%; display: none;" /> 
<img src="/images/visites-dechets/uiom-kva-2/uiom-kva-2.gif" id="img_usine2" alt="" width="1000" height="600" usemap="#uiom-kva" style="height: auto; max-width: 100%; display: none;" /> 
<!-- others img... --> 
<map id="uiom-kva" name="uiom-kva"> 
<area shape="circle" alt="" coords="101,484,22" href="#" id="btn-anim-1" onmouseover="switchImg('img_usine1', 'img_usine');return true" onmouseout="switchImg('img_usine', 'img_usine1');return true" /> 
<area shape="circle" alt="" coords="102,253,22" href="#" id="btn-anim-2" onmouseover="switchImg('img_usine2', 'img_usine');return true" onmouseout="switchImg('img_usine', 'img_usine2');return true" /> 
<!-- others areas... --> 
</map> 
</div> 

ボタンを初めてロールオーバーすると、（すべてのブラウザで）画像が変更されると点滅が表示されます。あなたはこれを避ける方法を知っていますか？ ？

あなたは

Answer 1

あなたが（代わりにショーと非表示の）スムーズな結果を生成するためにjQueryのフェードインとフェードアウト機能を使用することができますありがとうございました。