1

画像のスワップが正しく機能しません。問題は、その下に配置されたタイトルが position: absolute を持っているため、スワップされた画像の後ろに消えることです。画像の周りの余分な div に固定の高さを適用することで問題を回避できますが、これはレスポンシブ レイアウトで機能する必要があるため、高さは変更可能です。

簡単な解決策があると確信していますが、それを理解することはできません。

jsfiddleを作成し、以下にコードを貼り付けました。

HTML:

<div class="container">
<img src="http://placehold.it/100x100" class="image_off">
<img src="http://placehold.it/100x100/E8117F" class="image_on">
<h2>Title</h2>
</div>

jQuery:

//image fade on hover
$('.image_off').on('mouseenter', function () {
    $(this).fadeOut(200);
    $('.image_on').fadeIn(200).css('display', 'block');
});
$('.image_on').on('mouseleave', function () {
    $(this).fadeOut(200);
    $('.image_off').fadeIn(200);
});

どんな助けでも大歓迎です！

4

3 に答える 3

2

image_on が上部でフェードインしているためfadeOut、要素を指定する必要はありません。image_off

この動作を維持したい場合は、不透明度をほぼ透明にアニメーション化してから、image_onフェードインを一番上に置くことができます。

于 2013-02-04T20:31:43.037 に答える
1

を取り外しますposition:absolute;。

callback functionそして、JQueryに a を追加して、.fadeIn()と.fadeOut()が次々に実行されるようにします。

$('.image_off').on('mouseenter', function () {
    $(this).fadeOut(200,function(){
           $('.image_on').fadeIn(200).css('display', 'block');
    });

});
$('.image_on').on('mouseleave', function () {
    $(this).fadeOut(200,function(){
          $('.image_off').fadeIn(200);
    });

});

それをチェックしてください：http://jsfiddle.net/AliBassam/GTK8T/

于 2013-02-04T20:22:58.097 に答える
0

誰にとっても役立つ場合に備えて、最終的に使用されるjQueryは次のとおりです。

//image fade on hover
$('.image_off').on('mouseenter', function() {
        $(this).animate({opacity: 0.5}, 200);
        $('.image_on').fadeIn(200).css('display','block');
});   
$('.image_on').on('mouseleave', function() {
        $(this).fadeOut(200);
        $('.image_off').animate({opacity: 1}, 200);
});
于 2013-02-04T21:48:38.317 に答える