当我将鼠标悬停在图像上时，我需要使用 JavaScript 更改图像的不透明度值，但我的代码不起作用

Question

I need the images opacity to increase when I mouse over and decrease when I mouse out and I need this to be gradual and not instant as it would be with CSS.我需要图像不透明度在鼠标悬停时增加，鼠标移开时降低，我需要这是渐进的而不是像 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>

Answer 1

If you don't need to support current IE, you can do this cleanly using CSS transitions :如果您不需要支持当前的 IE，您可以使用CSS transitions干净地做到这一点：

HTML HTML

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

CSS CSS

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

#test:hover {
    opacity: 1.0;
}

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

(For the sake of clarity and sanity I'm omitting the vendor prefixes and using -prefix-free .) （为了清晰起见，我省略了供应商前缀并使用-prefix-free 。）

Answer 2

Is jQuery an option? 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>

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

当我将鼠标悬停在图像上时，我需要使用 JavaScript 更改图像的不透明度值，但我的代码不起作用

问题描述

2 个解决方案

解决方案1
2 2012-07-23 01:06:34

HTML HTML

CSS CSS

解决方案2
2 2012-07-23 01:20:36

当我将鼠标悬停在图像上时，我需要使用 JavaScript 更改图像的不透明度值，但我的代码不起作用

问题描述

2 个解决方案

解决方案1 2 2012-07-23 01:06:34

HTML HTML

CSS CSS

解决方案2 2 2012-07-23 01:20:36

解决方案1
2 2012-07-23 01:06:34

解决方案2
2 2012-07-23 01:20:36