这是一个带有大图像的画廊，侧面有缩略图。 单击缩略图，大图像淡出，新图像淡入（从链接的rel属性调用src）。
问题：旧图像淡出，重新出现，然后跳转到新图像……我猜测新图像尚未加载，因为它只在第一次加载图像时发生。
HTML
JQuery的
$(function() { $(".image").click(function() { // something with class "image" gets clicked and a function happens var image = $(this).attr("rel"); // variable (image) is defined to be the rel attribute of the link that was clicked $('#image img').hide(); // hides the old big image $('#image img').attr('src', image); $('#image img').fadeIn(); // animate to fade in return false; }); });
实时网站： http ： //marilynmcaleer.com/
知道如何解决这个问题吗？
使用load事件，以便在加载图像后开始淡入淡出，如下所示：
$(function() { $(".image").click(function() { var image = $(this).attr("rel"); $('#image img').hide().one('load', function() { $(this).fadeIn(); }).attr('src', image); return false; }); });
这将使用.one()绑定load处理程序，而不是附加多个事件处理程序（每次添加一个），并且一旦图像加载就会淡入…确保在绑定load处理程序后设置src ，以便它附加并且准备好出发。 即使从缓存中提取图像，这也可以。
或者，如果可能的话，更好的解决方案是将该处理程序绑定一次，如下所示：
$(function() { $('#image img').load(function() { $(this).fadeIn(); }); $(".image").click(function() { var image = $(this).attr("rel"); $('#image img').stop().hide().attr('src', image); return false; }); });
然后每次加载时，它都会再次淡入， .stop()将连续处理多次点击，排队动画。
我总是遇到嵌套元素没有返回正确的事件目标的问题，所以你可能想要使用直播事件：
$(function () { var img = $('#image img'); img.load(function(e) { img.fadeIn(); }); $(".thumbnails").live('click', function(e) { var rel = $(e.target).closest("a").attr("rel"); img.stop().hide().attr('src', rel); }); });
以上就是jQuery教程分享加载新图像时，点击跳转时JQuery淡入淡出/淡出图像相关内容,想了解更多jQuery开发(异常处理)及jQuery教程关注计算机技术网(www.ctvol.com)!)。
本文来自网络收集，不代表计算机技术网立场，如涉及侵权请联系管理员删除。
ctvol管理联系方式QQ:251552304
本文章地址：https://www.ctvol.com/jquerytutorial/558911.html