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