Javascript淡出淡出不工作

几天来，我一直在想这个问题，但似乎无法解决，我让它淡入淡出，现在我已经设置好淡入淡出，但它根本不起作用。我错过了什么

javascript:

function fadein(objectID, amount) {
    object = document.getElementById(objectID);

    animatefadein = function() {
        var MIN_OPACITY = 0;
        var MAX_OPACITY = 1;
        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('animatefadein()', 25);
        }
    }
    animatefadein();
}

函数fadein（objectID，amount）{
object=document.getElementById（objectID）；
animatefadein=函数（）{
var MIN_不透明度=0；
var MAX_不透明度=1；
if（object.style.opacityMIN\u opacity）{
var current=Number（object.style.opacity）；
var newopac=当前+金额；
object.style.opacity=字符串（newopac）；
setTimeout（'animatefadein（）'，25）；
}
}
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', 0.1);" onmouseout="fadein('rolloverwrapper', -0.1);"/>
        </div>
    </div>
</div>

---

为什么要重新发明轮子？很棒的库将为您实现这一点（更不用说许多其他简洁的转换）

---

将使“按钮”div淡出500毫秒，并在完成后记录“完成”。

为什么要重新发明轮子？很棒的库将为您实现这一点（更不用说许多其他简洁的转换）

---

将使“button”div淡出500毫秒，并在完成后记录“done”。

我完全同意Art Hanzel的回答，您应该使用jQuery。但是，为了解决您的问题，请按以下方式更改您的函数（您的版本中的if条件不正确）：

函数fadein（objectID，amount）{
object=document.getElementById（objectID）；
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（）'，25）；
}
}
animatefadein（）；
}

---

是一个很好的例子。

我完全同意Art Hanzel的回答，您应该使用jQuery。但是，为了解决您的问题，请按以下方式更改您的函数（您的版本中的if条件不正确）：

函数fadein（objectID，amount）{
object=document.getElementById（objectID）；
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（）'，25）；
}
}
animatefadein（）；
}

---

是一个很好的例子。

我相信任何css字段在添加到元素的

样式

对象时都会转换为字符串。您需要在字段上调用

parseFloat（）

，以获取其数值。与

Number（object.style.opacity）

相反，当我进行淡入/淡出时，我通常在超时时将当前值传递给函数。我有两个例子：和@ChrisJamesChampeau，如果块的检查没有转换值，则

。看来你已经明白了。此外，在我看来，淡入淡出效果（以及其他视觉效果）最好是用CSS3（4行css和40kb的JQuery）来完成的，但这取决于你。我相信任何css字段在添加到元素的
样式
对象时都会转换成字符串。您需要在字段上调用
parseFloat（）
，以获取其数值。与
Number（object.style.opacity）
相反，当我进行淡入/淡出时，我通常在超时时将当前值传递给函数。我有两个例子：和@ChrisJamesChampeau，如果块的检查没有转换值，则
。看来你已经明白了。另外，在我看来，淡入淡出效果（以及其他视觉效果）最好用CSS3（4行css和40kb JQuery）来完成，但这取决于你。但是我不想淡出按钮div，如果您正在查看鼠标事件，我想在鼠标在完全不同的分区上滚动时淡入淡出鼠标翻转包装器-使用mouseenter/mouseleave而不是mouseover/mouseout。后者不会冒泡，可能不会给你想要的行为。但我不想让按钮div淡出，我想让鼠标在完全不同的div上滚动时滚动包装器淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出淡出。后者不会冒泡，可能不会给你想要的行为。
$("#button").fadeOut(500, function() { console.log("done"); });

function fadein(objectID, amount) {
    object = document.getElementById(objectID);
    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 + amount;
            object.style.opacity = String(newopac);
            setTimeout('animatefadein()', 25);
        }
    }
    animatefadein();
}