0

重複の可能性:
jQuery が新しい画像にフェード

ホバー時に（プリロードされた）画像を交換する次のコードがあります。

$(document).ready(function() { 
$(".pf-item img").hover(
      function(){this.src = this.src.replace(".jpg","-h.jpg");},
      function(){this.src = this.src.replace("-h.jpg",".jpg");
 });
 var imgSwap = [];
 $(".img-swap").each(function(){
    imgUrl = this.src.replace(".jpg","-h.jpg");
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

それは非常にうまく機能しますが、画像 .jpg と -h.jpg の間でフェードできるようにしたいと考えています。

誰かがこれを行う方法を知っていますか/問題にアプローチするより良い方法を持っていますか? 多くの異なる fadeIn() アプローチを試みましたが、すべてが機能しないか、数回のホバーで機能し、空白の画像を置き換えているようです。

4

1 に答える 1

2

マウスオーバー/マウスアウトのアプローチを使用することをお勧めします。

私のHTMLはこのように設定されています。

<div class="imageWrap">
    <img class="shown" src="image-1.jpg" width="300" height="300" />
    <img class="hidden" src="image-2.jpg" width="300" height="300" />
</div>

次に、jQueryを使用して、それらを次のように交換できます

$(".imageWrap").mouseover(function() {
    $(this).children(".shown").fadeOut("fast");
    $(this).children(".hidden").fadeIn("fast");
});

$(".imageWrap").mouseout(function() {
    $(this).children(".shown").fadeIn("fast");
    $(this).children(".hidden").fadeOut("fast");
});

あなたのcssを忘れないでください

.imageWrap {width:300px; height:300px;}
.imageWrap > img {position:absolute;}
.imageWrap > .hidden {display:none;}
于 2012-07-17T10:05:09.607 に答える