Javascript 元素淡入，但不淡出

我有以下javascript

function fadeIn(objectID, amount) {
object = document.getElementById(objectID + 'Des');
if(amount > 0)
{
    object.style.display ='block';
    object.style.opacity = '0';
}
var i = 0;
animatefadein = function()
{
    var MIN_OPACITY = 0;
    var MAX_OPACITY = 1;
    if ( (amount > 0 && object.style.opacity < MAX_OPACITY) || (amount < 0 && object.style.opacity > MIN_OPACITY)) 
    {
        var current = Number(object.style.opacity);
        var newopac = current + Number(amount);
        object.style.opacity = String(newopac);
        setTimeout('animatefadein()', 50);

    }

}
animatefadein();
if(amount < 0)
{
    object.style.display ='none';
}

函数fadeIn（objectID，amount）{
object=document.getElementById（objectID+'Des'）；
如果（金额>0）
{
object.style.display='block'；
object.style.opacity='0'；
}
var i=0；
animatefadein=函数（）
{
var MIN_不透明度=0；
var MAX_不透明度=1；
if（（数量>0&&object.style.opacity<最大不透明度）| |（数量<0&&object.style.opacity>最小不透明度））
{
var current=Number（object.style.opacity）；
var newopac=当前+数量（金额）；
object.style.opacity=字符串（newopac）；
setTimeout（'animatefadein（）'，50）；
}
}
animatefadein（）；
如果（金额<0）
{
object.style.display='none'；
}

}

我需要将display设置为none，因为如果用户在上面浏览，需要在上面放置另一个元素

这是HTML

<div id='products'>
            <img src = './product1.png' usemap='#ourProducts' alt='Our Products' title='Hover over the names to find out more.'>
            <map id='ourProducts' name='ourProducts'>
                <area shape='rect' coords="55,55,210,110" href='#' id='forcePort' alt='ForcePort' title='ForcePort' onmouseover='fadeIn("forcePort",0.1)' onmouseout='fadeIn("forcePort",-0.1)'/>
                <area shape='rect' coords="105,248,270,290" href='#' id='quickPort' alt='QuickPort' title='QuickPort' onmouseover='fadeIn("quickPort",0.1)' onmouseout='fadeIn("quickPort",-0.1)'/>
                <area shape='rect' coords="390,260,535,303" href='#' id='scrinter' alt='Scrinter' title='Scrinter' onmouseover='fadeIn("scrinter",0.1)' onmouseout='fadeIn("scrinter",-0.1)'/>
                <area shape='rect' coords="675,242,835,292" href='#'  id='bugTrail' alt='Bug Trail' title='Bug Trail' onmouseover='fadeIn("bugTrail",0.1)' onmouseout='fadeIn("bugTrail",-0.1)'/>
                <area shape='rect' coords="688,42,858,138" href='#' id='dataExtract' alt='CRM Data Extractor' title='CRM Data Extractor' onmouseover='fadeIn("dataExtract",0.1)' onmouseout='fadeIn("dataExtract",-0.1)'/>
            </map>
            <div id='productDes'>
                <div id='scrinterDes'>
                                      Data that needs to be shown!
                </div>
                <div id='bugTrailDes'>
                </div>
                <div id='quickPortDes'>
                </div>
                <div id='forcePortDes'>
                </div>
                <div id='dataExtractDes'>
                </div>
            </div>
        </div>

只需转到显示屏上的产品，并将鼠标悬停在产品名称上。
我希望您认识到，使用jQuery很容易做到这一点。您的脚本的问题是，
Opacity
和
display
是两个不同的CSS属性，要实现这一点，您需要将
Opacity
设置为0，将
显示：无
更改为
块
或
内联块
，然后设置
不透明度的动画
请参见此处：

首先，您不应该像这样调用
setTimeout
：
setTimeout（'animatefadein（）'，50）
，因为它使用
eval
，这非常缓慢且不安全

其次，这里有代码：

function fadeIn(objectID, amount,callback) {
    object = document.getElementById(objectID + 'Des');
    object.style.display ='block';
    object.style.opacity = String(Number(amount<0));
    animatefadein = function()
    {
        var MIN_OPACITY = 0;
        var MAX_OPACITY = 1;
        if ( (amount > 0 && object.style.opacity < MAX_OPACITY) ||
             (amount < 0 && object.style.opacity > MIN_OPACITY)
        ){
            var current = Number(object.style.opacity);
            var newopac = current + Number(amount);
            console.log(current + Number(amount));
            object.style.opacity = String(newopac);
            setTimeout(animatefadein, 50);

        }else{
            if(amount<0){object.style.display='none';}
            if(callback){callback();}
        }

    }
    animatefadein();
}
fadeIn('a',0.1,function(){fadeIn('a',-0.1);});

函数fadeIn（objectID、amount、callback）{
object=document.getElementById（objectID+'Des'）；
object.style.display='block'；
object.style.opacity=字符串（数字（数量0&&object.style.opacity最小不透明度）
){
var current=Number（object.style.opacity）；
var newopac=当前+数量（金额）；
控制台日志（当前+编号（金额））；
object.style.opacity=字符串（newopac）；
setTimeout（animatefadein，50）；
}否则{
如果（只是问：为什么不使用jQuery？你用
jQuery
标记了你的问题，但似乎没有使用jQuery。如果是，你可能想查看
.fadeIn
和
.fadeOut
来处理动画。播放一段时间start@AbijeetPatro：如果您使用se jQuery而不是实现您自己的（可能是跨浏览器的）动画等等era=）@AbijeetPatro：是的，您（为自己或公司）产生结果的速度可以被视为开发人员绩效的衡量标准。例如，通过编写其他人已经编写的动画函数（并花了大量时间确保它工作正常），在没有必要的情况下，您正在重新设计轮子。我正在这样做，不是吗？如果我使用jQuery，我还需要将显示设置为“无”或“阻止”吗？不，jQuery会自动为您解决这个问题，当您使用FadeIn时，FadeOut功能在今天早上对它进行了修改，它工作起来非常轻松！谢谢！您能推荐一些其他效果吗对于jQuery中的图像？它将我的js代码总数减少了大约60行，这在考虑到我只有大约200行的情况下是非常重要的。我可能可以通过摆弄这个来实现它，但我想我将检查jQuery方法的简单性。我的投票结果如下：）