如何使用for循环更改图像的不透明度以创建逐渐照亮的效果？

Question

I have created a Css class which defines the opacity of my image but I need to access it in JavaScript and change it in a for loop then pass the new opacity back to a variable and repeat the process until I have the opacity I want which is 100%.

I need this to be triggered by the onmouseover event handler. Can anyone show me some code so I know how its done?

css in my external stylesheet:

.test{

opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

Answer 1

// assuming jQuery
$('.test').bind({
 mouseover: function() {
  $(this).animate({opacity:1},500,function(){
    // something to do when done
  });
 }
});

Using straight forward javascript, you'll want to get the element:

var element = this;// for example or var element = document.getElementById('some-id');

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

Quick Note from the comments:

The setTimeout() call can be used in the following ways:

1. if you have NO parameters to pass, use this

   setTimeout(updateOpacity, 50);

2. if you are working with legacy code, you may find this, which works, but see below

   setTimeout("updateOpacity();", 50);

3. if you need to pass parameters to your callback function, use this in preference to 2.

   setTimeout(function(){ updateOpacity(); }, 50);

Answer 2

With jQuery you can use

$('.test').fadeTo( 500, 1.0 ); //fade to 100% opaque in 500 ms

Ref: http://api.jquery.com/fadeTo/

For on mouseover:

$('.test').mouseover(function(){
  $(this).fadeTo( 500, 1.0 );
});