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

【问题标题】：How might I apply fadein/fadeout to full-size image when clicking thumbs?单击拇指时如何将淡入/淡出应用于全尺寸图像？
【发布时间】：2013-10-03 02:05:06
【问题描述】：

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

【问题讨论】：

你试过fadeOut()和fadeIn()吗？
我尝试过使用这些，但不确定将它们放在代码中的什么位置。我已经让全尺寸图像淡出，但在淡入时没有运气。
fadeOut() 和 fadeIn()（以及大多数（如果不是全部）其他动画函数）具有允许您在动画完成后执行代码的回调。最简单的做法是将fadeIn() 调用放在fadeOut() 调用的回调中。
我是脚本界的新手。我如何将它合并到我当前使用的代码中？

标签： jquery thumbnails fadein fadeout

【解决方案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();
    }
});

【讨论】：