0

基本的に、以下のjQueryコードコードを使用すると、ホバー時にある画像を別の画像に切り替えることができますが、最初の画像から別の画像にフェードさせたいのですが、それを機能させる知識がありません(いくつかの回答を検索しました)私も自分でやろうとしました）。

この質問の問題点は、多くの人が質問しているように見えるということですが、(少なくとも私がやろうとしていることに関して) 少し役立つ答えがあるかもしれないと私が見つけたいくつかについては、彼らはまだ私が探しているものではありません。

私はここから作業スクリプトを持っています(http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/)、私はフェードイン効果が欲しいだけです、私は混乱しようとしました私自身はそれを使っていますが、jQueryはまだ私の弱点です（笑）

    <script type="text/javascript">
    $(function() {
    $('img[data-hover]').hover(function() {
    $(this)
    .attr('tmp', $(this).attr('src'))
    .attr('src', $(this).attr('data-hover'))
    .attr('data-hover', $(this).attr('tmp'))
    .removeAttr('tmp');
    }).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));
    });;
    });
    </script>

    <img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

ここ (http://jqueryfordesigners.com/image-cross-fade-transition/) とここ (http://jqueryfordesigners.com/image-fade-revisited/) は、私がやろうとしていることの素晴らしい例ですが、必要だと思うよりもはるかに多くのコードです。

どんなアイデアでも大歓迎！また、誰かがより簡単なルートを持っていれば、私はどちらでもかまいません（笑）。ありがとう！

4

4 に答える 4

0

あなたはこのように何かをすることができます：

HTMLコードがあります：

<div class="img" style="position:relative; z-index:1;">
  <div class="hover" style="position:absolute; z-index:3; top:0; left:0; display:none;"><img src="image-hover.png" /></div>
  <div style="position:absolute; z-index:2; top:0; left:0"><img src="image.png"></div>
</div>

そこにjquery：

$('.img').hover(
   function(){
     $(this).find('.hover').fadeIn();
},
   function(){
     $(this).find('.hover').fadeOut();
}
);

画像から必要な場合:

<img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

jquery $('img').each(); を使用して、上記のようにこれを html コードに置き換えることができます。

于 2013-06-14T22:29:17.560 に答える
0

おそらく同様の質問がここにあります：

フェード効果のあるjQuery Change Image src

基本的に、ホバーするとフェードアウトし始めます

$('img[data-hover]').hover(function() {
var $image=$(this);
$(this)
.attr('tmp', $(this).attr('src'))
.attr('src', $(this).attr('data-hover'))
.attr('data-hover', $(this).attr('tmp'))
.removeAttr('tmp');

$image.fadeOut(400, function() {
        $image.attr('src',$image.attr('data-hover'));
    }).fadeIn(400);

});

コールバック イベントを使用して、fadeIn でチェーンします。コールバック イベントで、画像ソースを変更します。

貼り付けたソース コードは説明のためのものであり、期待どおりに動作しない可能性がありますが、アイデアは理解できるでしょう。

これが実際の例です: http://jsfiddle.net/GxBWt/

于 2013-01-15T06:29:31.953 に答える
0

ここにjQueryコードがあります

$("img").mouseenter(
  function () {
     $("img").attr("src","http://rhceblog.com/wp-content/uploads/2012/11/Yahoo_3.jpg");
  }
);
$("img").mouseleave(
  function () {
     $("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt__9kJSk-ESPLpb_zfQ7SQm7Z_w_m32fyiD07hnTAU7zvFWx_dQ");
  }
);

デモ: http://jsfiddle.net/ipsjolly/R6FnC/

于 2013-01-15T06:48:53.257 に答える
0

本当にその効果が必要な場合は、キャンバスを使用できます。

AとBの2つの画像があります。

  1. キャンバスの寸法として maxDimension(a, b) を使用します。
  2. globalCompositeとして設定lighter
  3. set globalAlpha= 0.1 (0.1 は変更可能なステップ値ですが、範囲は [0, 1] です)
  4. 画像を描く
  5. セットglobalAlpha= 1 - ステップ
  6. 画像bを描く

  7. 3から6を繰り返す

    var i = 0.1;// グローバル アルファ
    var runID; // 間隔 ID

    関数 fadeImage() { if (i > 1) { clearInterval(runID); 戻る;
    } ctx.globalAlpha = i;
    ctx.drawImage(imageA、幅、高さ);
    ctx.globalAlpha = 1 - i;
    ctx.drawImage(imageB、幅、高さ);
    i += 0.1;
    }

    function run() { ctx.save(); ctx.globalComposite = "より軽い"; runID = setInterval(fadeImage, 500);
    ctx.restore(); }

例: http://jsfiddle.net/xFryE/1/

例では、キャンバスの寸法を指定しただけで、2 つの画像の幅を調整していません。同じ幅の画像を使用する方が良いはずです。

于 2013-01-15T07:57:06.627 に答える