1

:hover を使用して背景を表示する CSS を使用した IMG があります。jQuery を使用して、すぐに表示するのではなくバックグラウンドでフェードインする簡単な方法はありますか?

私の現在のコードは次のとおりです。

HTML: <img id="home-logo" src="path/logo-home.png">`
CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;}
4

3 に答える 3

0

はい！！！あなたはこれを使うことができます...

$('#home-logo').hover(function(){
  $(this).fadeIn('slow', function() {
  //do something  
  });
 });

詳細については、このチュートリアルを参照してください。フェードイン

于 2011-01-27T06:15:18.417 に答える
0

私はそれを理解し、これを行うための最良の方法は、背景の代わりに2つの画像を使用することであることがわかりました:

HTML:
    <img id="home-link" src="path/logo.gif"><img id="home-fade" src="path/logo-fade.gif">

CSS:
    #home-link { cursor:pointer; }
    #home-fade { display:none; }

JS:
    $(document.body).hover(function () {
          $("#home-fade").fadeIn('slow');
        },function(){
          $("#home-fade").fadeOut('slow');
        });
于 2011-01-27T14:42:25.053 に答える
0

不透明度をフェードする必要があるかもしれません。その場合は、fadeTo メソッドを使用できます。最初の引数は持続時間または速度、2 番目の引数は不透明度の値です。

Jクエリコード:

    $('#home-logo').hover(
    function(){
      $(this).fadeTo('slow',0.2);
    },
    function(){
      $(this).fadeTo('slow', 1.0);
    });

HTML コード:

<img id="home-logo" src="path/logo-home.png">

デモ

于 2011-01-27T07:36:05.117 に答える