Question

单击缩略图图像时，我很难尝试将简单的淡入/淡出效果应用于全尺寸图像。我单击缩略图时，我当前使用的jQuery脚本会切换全尺寸图像。现在我想应用fadein / fadeout效果。关于如何实现这一目标的任何提示/建议？

这是我正在使用的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

使用链接来容纳它。

$("#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();
    }
});

点击拇指时，如何将fadein / fadeout应用于全尺寸图像？

1 个答案: