我在尝试在单击缩略图时对全尺寸图像应用简单的淡入/淡出效果时遇到困难。当我单击缩略图时，当前使用的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>
使用链接实现它。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();
}
});
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句