1

サムネイル画像をクリックしたときに、単純なフェードイン/フェードアウト効果をフルサイズの画像に適用しようとして立ち往生しています。現在使用している jQuery スクリプトでは、サムネイルをクリックするとフルサイズの画像が切り替わります。次に、フェードイン/フェードアウト効果を適用したいと思います。これを達成するためのヒントやアドバイスはありますか?

私が使用しているjQueryスクリプトは次のとおりです。

$("#work_thumbs").on("click", "img", function(){
    $("#work_largeImage").attr("src", $(this).attr("src").replace("thumb","large"));
});

ここに私のHTMLがあります：

<div id="work_gallery">
  <div id="work_panel"><img id="work_largeImage" src="http://wedesignstudios.com/wp-content/uploads/2013/09/ICON_FACEBOOK.svg" /></div>
  <div id="work_thumbs">
     <div class="thumbs_work_display"><img src="http://wedesignstudios.com/wp-content/uploads/2013/09/ICON_FACEBOOK.svg" alt="" /></div>
     <div class="thumbs_work_display"><img src="http://wedesignstudios.com/wp-content/uploads/2013/09/ICON_TWITTER.svg" alt="" /></div>
     <div class="thumbs_work_display"><img src="http://wedesignstudios.com/wp-content/uploads/2013/09/ICON_INSTAGRAM.svg" alt="" /></div>
     <div class="thumbs_work_display"><img src="http://wedesignstudios.com/wp-content/uploads/2013/09/ICON_BEHANCE.svg" alt="" /></div>
     </div>
</div>
4

1 に答える 1

0

それを達成するために連鎖を使用してください。hide() メソッドは、それが非表示で開始されることを確認し、その後、fadeIn() が適切な遷移を行います。

$("#work_thumbs").on("click", "img", function(){
    $("#work_largeImage").attr("src", $(this).attr("src").replace("thumb","large"))
        .hide()
        .fadeIn();
});

大きな画像にクリック イベントを登録してフェードアウトします。

$(document).ready(function() {
    $('#work_largeImage').click(function() {
        $(this).fadeOut();
    }
});
于 2013-10-02T18:05:06.150 に答える