5

私はしばらくの間オンラインで検索していて、この単純なタスクを実行するjqueryスクリプトを作成するための最良の方法を見つけようとしています。それは、ホバー時に画像をエレガントなフェード効果で交換することです。私は多くの解決策（面倒で不格好な方法）を見つけ、それを私が最も良いと思うものに絞り込みました：

http://designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

http://bavotasan.com/tutorials/creating-a-jquery-mouseover-fade-effect/

私の目的では、このホバースワップを1ページで何度も実行できるようにしたいと思います。このページはhttp://www.vitaminjdesign.comです。現在、「サービスナビゲーション」（さまざまな種類のホバー）にホバーを設定していますが、フッターのソーシャルアイコンだけでなく、すべてのナビゲーションボタンにもホバーを適用したいと考えています。すべてのホバーは同じになります。2つの画像ファイルは、ホバー時に一方が他方にフェードインし、休暇時に戻ります。これについて行くための最良の方法は何ですか？上記のリンクの1つはおそらく？

4

5 に答える 5

6

単一の背景画像を使用してこれを実現し、透明なdivをフェードインおよびフェードアウトすることもできます。これは簡単な例です。これは、単一のクラスの画像に対して自動的に機能するように拡張できます。

$(document).ready( function() {
    $("#mask-div")
        .css({
          "position": "absolute",
          "width": 275,
          "height": 110,
          "background": "rgba(255, 255, 255, 0.5)"
        })
        .mouseover( function() {
             $(this).fadeOut("slow");
        })
    ;
    $("#test-img").mouseout( function() {
        $("#mask-div").fadeIn("slow");
    });
});

実行中のデモはjsbinで見ることができます：demo-one

更新：これはより一般的な解決策です（不完全ですが、いくつかのアイデアを示しています）：デモ-2。この効果を持たせたい画像にクラス「fade-img」を追加するだけです。

$(document).ready( function() { 
    $(".fade-img") 
        .before("<div class='fade-div'></div>") 
        .each( function() { 
            var img = $(this); 
            var prev = img.prev(); 
            var pos = img.offset(); 

            prev.css({ "height": img.height(), "width": img.width(), "top": pos.top, "left": pos.left }) 
                .mouseover( function() { 
                    $(this).fadeOut("slow"); 
                } 
            ); 
        }) 
        .mouseout( function() { 
            $(this).prev().fadeIn("slow"); 
        }) 
    ; 
});
于 2009-12-07T05:00:01.320 に答える
4

私はあなたが提供した2番目のリンクで解決策を選びます。短く、清潔でシンプルです。

  • <img>2つのタグを作成します
  • 一方を他方の上に正確に配置します（CSS with z-index）
  • ホバーすると、画像の不透明度が高くなりz-index、0
  • これにより透明になり、下にある画像が表示されます
  • ホバーが終了すると、不透明度が1再びフェードします。

終わり

于 2009-12-07T09:09:54.017 に答える
1

中身$(document).ready()

$('.imgbuttonclass').hover(function(){
    $(this).animate({
        backgroundImage: 'img2.png'
    },500);
},function(){
    $(this).stop(true).animate({
        backgroundImage: 'img1.png'
    },500);
});

編集

これだけを実行したい場合：http：//designwoop.com/2009/08/image-hover-effect-using-jquery-tutorial/

次に、jthompsonの回答を使用するか、そのページのコードを使用します。2つの別々の画像を使用する場合は、次のことを確認してください。

http://peps.ca/blog/easy-image-rollover-script-with-jquery/

とデモ

それが何をするのか

ドキュメントを調べて、クラスが「ro」の「img」または「input」タグを探します。ロールオーバーイメージには、通常のイメージと同じ名前を付ける必要がありますが、最後に「_o」を付けます。たとえば、「image.gif」のロールオーバー画像は「image_o.gif」になります。すべての画像タグを見つけた後、スクリプトはすべてのロールオーバー画像をプリロードし、「マウスオーバー」イベントと「マウスアウト」イベントをアドバタイズします。

于 2009-12-07T04:45:48.343 に答える
1

jQueryを使用した画像のクロスフェード遷移では、これにアプローチするいくつかの方法について説明しています。

于 2009-12-07T05:17:01.883 に答える
1

CSSスプライトを使用して効果を実現するため、これが最良の方法だと思います。チュートリアルとデモはどちらも、CSS3とjQueryを使用してこれを実現する方法を示しています。以下でそれをチェックしてください：

http://css-tricks.com/fade-image-within-sprite/

于 2012-02-17T12:34:34.940 に答える