1

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

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

我的外部样式表中的 css：

.test{

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

2 回答 2

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

评论中的快速说明：

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

  1. 如果您没有要传递的参数，请使用此

    setTimeout(updateOpacity, 50);

  2. 如果您使用的是遗留代码，您可能会发现这个可行，但请参见下文

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

  3. 如果您需要将参数传递给回调函数，请优先使用它而不是 2。

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

于 2012-07-22T21:55:07.803 回答
-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 );
});
于 2012-07-22T21:53:24.917 回答