Question

如此简单，我已经想出如何在鼠标悬停调用中淡化div。但我想知道如何淡化它，而不是简单地复制与已经存在的javascript相反的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();
}

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

Answer 1

尝试这样的事情：

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

使用以下HTML：

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

Answer 2

如果你想要的行为与你已经拥有的行为相反，但是在另一个事件上，那就干脆做吧。当你已经知道一个简单的解决方案时，不要寻找花哨的解决方案。

Answer 3

在fadein函数中添加一个参数以指定渐变方向。 1 / -1,0 / 1，t / f等......并将其传递给你的animatefadein。

然后你有

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

但是，您应该考虑使用jquery来处理这种事情。与仅仅这几行JS相比，该库将是“沉重的”，但您获得的灵活性是巨大的。

鼠标悬停的Javascript fadein有效，但不会淡出

3 个答案: