jquery - 如何在 JQuery 中用动画替换 div 内容？

Question

我需要用动画改变 div 的内容(只有 1 个图像元素)。如果我们可以根据方向变量来做，那就太好了。它应该像幻灯片一样工作。

var img = $("<img />").attr('src', imgUrl)
.load(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('broken image!');
    } else {
        $("#map").html(img);
    }
}); 

我尝试使用此解决方案，但它改变了布局并且只是淡入淡出的动画。

$('#map').fadeOut("slow", function(){
    var div = $("<div id='map'>"+img2+"</div>").hide();
    $(this).replaceWith(div);
    $('#map').fadeIn("slow");
});

只需要 JQuery 脚本解决方案。谢谢!

UPD:我们可以在淡出旧图像的同时淡入新图像吗？

Answer 1

当加载新图像时，您可以fadeOut() 旧图像和fadeIn() 新图像:

var duration = 250;
var img = $("<img />").attr('src', imgUrl).css("display", "none")
.load(function() {
    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
        alert('broken image!');
    } else {
        $("#map").children().fadeOut(duration, function () {
            $("#map").html(img).children().fadeIn(duration);
        });
    }
});