2

我需要在鼠标悬停时增加图像不透明度，并在鼠标移出时减少图像不透明度，并且我需要它是渐进的，而不是像 CSS 那样即时。

<html>
    <head>
    </head>
    <body>
        <img id="test" src="space1.png" onmouseover="updateOpacity()"/>
        
        <script type="text/javascript">
        
            var element = document.getElementById('test');
            var opacity = element.style.opacity;
            
            function updateOpacity()
            {
                opacity = opacity += 0.2;
                
                if(opacity >= 1)
                {
                    // done
                    opacity = 1;
                }
                else
                {
                    element.style.opacity = opacity; // this updates the opacity
                    setTimeout(function(){updateOpacity();}, 50); // 50 is the delay, 50milliseconds
                }
            }
        </stript>
    
    </body>
</html>
4

2 回答 2

2

如果你不需要支持当前的 IE，你可以使用CSS 转换干净地做到这一点：

HTML

<img id="test" src="space1.png"/>

CSS

#test {
    transition: opacity 600ms;
    opacity: 0.35;
}

#test:hover {
    opacity: 1.0;
}

强制性 jsFiddle：http: //jsfiddle.net/millimoose/uNeMg/

（为了清楚起见，我省略了供应商前缀并使用-prefix-free.）

于 2012-07-23T01:06:34.493 回答
2

jQuery是一个选项吗？

<img id="test" src="space1.png" style="opacity: 0.1;">

<script>
var delay = 500; //500ms
$("#test").mouseover(function(){
    $(this).stop().animate({
        opacity: 1.0
    }, delay);
}).mouseout(function(){
     $(this).stop().animate({
        opacity: 0.1
    },  delay); 
});
</script>


编辑：http: //jsfiddle.net/m3PAy/

于 2012-07-23T01:20:36.867 回答