jquery - 单击拇指时如何将淡入/淡出应用于全尺寸图像？

Question

单击缩略图图像时，我试图将简单的淡入/淡出效果应用于全尺寸图像。当我单击缩略图时，我当前使用的 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>

Answer 1

使用链接来完成它。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();
    }
});