jquery - 在 JQuery 中使用淡出、淡入和 img

Question

我是 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>

Answer 1

我建议不要使用.delay，而是加载新图像并fadeIn在回调中执行。

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

演示：http: //jsfiddle.net/v5fqB/