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

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 に答える
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 に答える