2

ホバー時にクロスフェードで画像を入れ替える簡単な方法を探しています。私は多くの解決策を見てきましたが、私が見つけたものはすべて肥大化して複雑に見えます。これを達成する簡単な方法はありますか？

私が使用しているImgスワップコード：

$(function() {
$(".img-swap").hover(
    function() {
        this.src = this.src.replace("_off","_on");
    },
        function() {
            this.src = this.src.replace("_on","_off");
    });
});

ここにfadeIn/およびfadeOutを追加する方法はありますか？それとも、これはこれを行うための間違った方法ですか？私が試したすべてがうまくいかないようです！どんな助けでも大歓迎です。

4

3 に答える 3

2

2 つの画像をクロス フェードするには、ある時点で両方の画像が表示されるため、DOM に 2 つの画像が必要になります。たった 1 つの画像でそれを行うこともできますが、その場合、画像をフェード アウトし、ソースを交換し、フェード インする必要があり、これは実際にはクロス フェードではありません。

<img src="image1.png" id="test" />
<img src="image2.png" id="test2" />​

JS:

$('#test').on('mouseenter', function() {
        $(this).fadeOut('slow');
        $('#test2').fadeIn('slow');
});

$('#test2').css({left: $('#test').position().left, top: $('#test').position().top})
           .on('mouseleave', function() {
        $(this).fadeOut('slow');
        $('#test').fadeIn('slow');
});
​

フィドル

于 2012-12-21T11:38:54.900 に答える
2

jsBin デモ

  $(".img-swap").on('mouseenter mouseleave', function( e ){

    var mE = e.type=='mouseenter';
    var c = ['_on','_off'];
    this.src = this.src.replace( mE?c[1]:c[0] , mE?c[0]:c[1] );
    $(this).hide().stop().fadeTo(1000,1);

  });
于 2012-12-21T10:59:54.427 に答える
0

以下のコードを使用し、jquery も含めます。

 $("#one").hover(function(){$('#one').fadeOut(1000);$('#two').fadeIn(2000);}
);
 $('#one').fadeIn(2000);

<span id="one"><img serc="image1path"></span>
<span id="two" style="display:none"><img serc="image2path"></span>
于 2012-12-21T11:01:21.160 に答える