Question

我一直试图解决这个问题几天了，似乎无法把它弄好，我让它渐渐消失但是没有消失，现在我已经将它设置为fadein并且它根本不起作用。我缺少什么

的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();
}

和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>

Answer 1

为什么重新发明轮子？非常棒的jQuery库将为您做到这一点（更不用说许多其他简洁的过渡）。

$("#button").fadeOut(500, function() { console.log("done"); });

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

Answer 2

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

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();
}

Here是一个有效的例子。

Javascript fadein fadeout无效

2 个答案: