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

【问题标题】：How do I change the opacity of an image using a for loop to create a gradual lighting up effect?如何使用 for 循环更改图像的不透明度以创建渐变照明效果？
【发布时间】：2012-07-21 04:45:50
【问题描述】：

我创建了一个定义图像不透明度的 Css 类，但我需要在 JavaScript 中访问它并在 for 循环中更改它，然后将新的不透明度传递回变量并重复该过程，直到获得不透明度想要100%。

我需要它由 onmouseover 事件处理程序触发。谁能给我一些代码，让我知道它是怎么做的？

我的外部样式表中的css：

.test{

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

【问题讨论】：

标签： javascript image for-loop event-handling opacity

【解决方案1】：

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

使用直接的 javascript，您会想要获取元素：

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

来自 cmets 的快速说明：

setTimeout() 调用可以通过以下方式使用：

如果你没有要传递的参数，使用这个

setTimeout(updateOpacity, 50);
如果您使用的是遗留代码，您可能会发现这是可行的，但请参见下文

setTimeout("updateOpacity();", 50);
如果您需要将参数传递给您的回调函数，请优先使用 this 而不是 2。

setTimeout(函数(){ 更新不透明度（）； }, 50);

【讨论】：

在您的setTimeout 调用中不需要额外的function 包装器。
不，不要不“引用函数名和括号”！那是老风格。就做setTimeout(updateOpacity, 50);
绝对没有引号。我会解雇任何为我工作的程序员 setTimeout("updateOpacity()", 50)
1.它使用 eval（坏） 2. 它只能从全局范围调用函数（也不好） 3. 根本不需要它 4. w3fools.com
@DavidThomas 当然，我（大部分）是在开玩笑，但确实让我感到惊讶的是，有多少人仍然认为setTimeout("doSomething()", t) 这样的东西是“正确的方式”。

【解决方案2】：

有了 jQuery，你可以使用

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

参考：http://api.jquery.com/fadeTo/

鼠标悬停时：

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

【讨论】：