在带有img的JQuery中使用fadeout、fadein

我是jQuery新手，我想做的是让图像淡入淡出，淡出完成后，我想在新的src中淡入淡出的同时更改图像。不是我想要的那样。这是我到目前为止所拥有的。任何帮助都会很有帮助

<img src="images/airport1.jpg" Height="200" Width="500" id="main_pic"/> 
<input id="Button1" type="button" value="button" />

<script>
$(document).ready(function () {
    $("#Button1").click(function () {
        changePicture();
    });
});
function changePicture() {
    $("#main_pic").fadeOut(5000).delay(3500).attr('src', "images/airport2.jpg").fadeIn(5000);
}
</script>

$（文档）.ready（函数（）{
$（“#按钮1”）。单击（函数（）{
changePicture（）；
});
});
函数changePicture（）{
$（“#main#u pic”）.fadeOut（5000）、delay（3500）、attr（'src'，“images/airport2.jpg”）.fadeIn（5000）；
}

我建议加载新图像并在回调中执行

fadeIn

，而不是使用

.delay

function changePicture() {
    $("#main_pic").fadeOut(5000, function(){
        $(this).attr('src', "images/airport2.jpg").fadeIn(5000);
    });
}

---

演示：

你说它没有按你想要的方式工作。发生了什么以及这与您期望的有什么不同？问一个特定的问题，没有人会为您完成工作。更改源代码有一个缺点，即如果您尚未预加载映像，则需要执行HTTP请求来加载映像。我想我知道你要写这篇文章，但是如果你不能让它完美地工作，不要感到沮丧。所做的是当第二张图片出现时，它不会消失，它只是出现，然后消失，就像我期望的那样，凯文…是的，我在浏览的一个网站上看到了这一点，我觉得这很酷，想尝试复制一下