jQuery加载图片无法实现fadeIn淡入效果求助

问题根源 #

• attr()方法不支持回调参数：jQuery的attr('src', value)没有第三个参数作为回调的用法，你想在图片加载完成后执行动画，需要绑定load事件实现。
• fadeIn()的适用场景错误：fadeIn()的作用是将**display:none状态**的元素逐渐显示（同时把opacity提升到1），而你的图片初始是opacity:0.5但处于可见状态，所以调用该方法不会有任何变化。

解决方案 #

方案1：从完全隐藏状态淡入图片

如果需要图片从隐藏状态开始淡入，修改初始样式为display:none，并通过load事件触发动画：

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>slide show test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<img id="image" alt="slide" style="display:none;"/>
<script>
var x="tiananmen-square-600.webp";
$("#image").attr('src', x).on('load', function() {
    $(this).fadeIn("slow");
});
</script>
</body>
</html>

方案2：从半透明过渡到完全显示

如果想保留初始半透明效果，实现到完全不透明的动画，使用fadeTo()方法指定目标透明度：

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset="UTF-8">
<title>slide show test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<img id="image" alt="slide" style="opacity:0.5;"/>
<script>
var x="tiananmen-square-600.webp";
$("#image").attr('src', x).on('load', function() {
    $(this).fadeTo("slow", 1);
});
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Ed S.