鼠标盖上的Javascript fadein可以工作，但不能'；t衰减

简单地说，我已经知道了如何在鼠标悬停通话时淡入div。但是我想知道如何淡出它，而不是简单地复制与它相反的javascript并将其链接到onmouseout

以下是我的Javascript：

<script type="text/javascript">
    function fadein(objectID){
object = document.getElementById(objectID);
object.style.opacity = '0';

animatefadein = function (){
 if(object.style.opacity < 1){   
 var current = Number(object.style.opacity);     
var newopac = current + 0.1;
object.style.opacity = String(newopac);     
setTimeout('animatefadein()', 100);
}
}
animatefadein();
}

函数fadein（objectID）{
object=document.getElementById（objectID）；
object.style.opacity='0'；
animatefadein=函数（）{
如果（object.style.opacity<1）{
var current=Number（object.style.opacity）；
var newopac=电流+0.1；
object.style.opacity=字符串（newopac）；
setTimeout（'animatefadein（）'，100）；
}
}
animatefadein（）；
}

还有我的html

<div id="rolloverwrapper" style="opacity:0;"></div>
<div id="wrapper">
    <div id="content">
        <div id="button">
            <img src="images/dj.png" onmouseover="fadein('rolloverwrapper');"/>
        </div>
    </div>
</div>

如果你想要的行为与你已经拥有的相反，但发生在不同的事件上，那么就简单地去做。当您已经知道一个简单的解决方案并且它可以工作时，不要寻找花哨的解决方案。

在fadein函数中添加一个参数以指定淡入方向。1/-1、0/1、t/f等。。。把它传给你的动画设计师

那你就有了

<img src="..." onmouseover="fadein('rolloverwrapper', 1)" onmouseout="fadein('rolloverwrapper, 0)" />

---

但是，您应该考虑使用jquery进行这种排序。与这几行JS相比，该库将是一个“沉重”的库，但您获得的灵活性是巨大的。

尝试以下方法：

<script type="text/javascript">
    function fade(objectID, amount) {
        var MIN_OPACITY = 0;
        var MAX_OPACITY = 1;

        object = document.getElementById(objectID);

        animatefade = function() {
            if(object.style.opacity < MAX_OPACITY && object.style.opacity > MIN_OPACITY){   
                var current = Number(object.style.opacity);     
                var newopac = current + amount;
                object.style.opacity = String(newopac);     
                setTimeout('animatefade()', 100);
            }
        }
        animatefade();
    }
</script>

功能衰减（对象ID、数量）{
var MIN_不透明度=0；
var MAX_不透明度=1；
object=document.getElementById（objectID）；
animatefade=函数（）{
如果（object.style.opacityMIN_opacity）{
var current=Number（object.style.opacity）；
var newopac=当前+金额；
object.style.opacity=字符串（newopac）；
setTimeout（'animatefade（）'，100）；
}
}
animatefade（）；
}

使用以下HTML：

<img src="images/dj.png" onmouseover="fade('rolloverwrapper', 0.1);" onmouseout="fade('rolloverwrapper', -0.1);"/>

是的，我根本不知道Jquery，但好吧，那么我该如何按我现在的方式添加参数，我想我必须重新开始，或者不？？它会把它分开而不是重新开始我想我认为这很接近，但它不起作用，它实际上使img dj.png消失了