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

我需要用动画更改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);
    }
}); 

var img=$（“
我试图使用这个解决方案，但它改变了布局，只是淡出了动画

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

$（'#map'）。淡出（“慢”，函数（）{
var div=$（“”+img2+“”）。hide（）；
$（此）.替换为（div）；
$（'地图'）.fadeIn（“慢”）；
});

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

UPD：我们可以在淡入旧图像的同时淡入新图像吗？
加载新图像时，您可以
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);
        });
    }
}); 

var持续时间=250；
变量img=$（“这不是一个解决方案，但我建议您使用类而不是
id
，因为根据您的代码，您正在创建具有相同
id
的
div
，并将其插入DOM并隐藏其他，然后存在多个具有相同
id
的
div，这是一种不好的做法。请为图像指定一个id，然后替换淡出包含的div会在图像id本身上应用淡出。古鲁帕萨德，谢谢，我会记住它。瓦卡尔，好的，那应该可以。但是有任何线索，如何使用方向型动画来完成吗？你只需要正确地替换
图像url
，并给出隐藏和显示
div
的动画。如果我错了，请纠正我！Not实际上，我需要根据方向用另一个图像来更改图像。例如，如果按下“向上”，旧图像应该向上淡出，新图像应该从底部向上。这是我想要实现的理想结果。谢谢，这很有效，但是有没有办法同时为它们设置动画？你，但你必须将它们放置在每个ot的顶部用
position:absolute
，或者将它们放在一个相邻的内部容器中，并在容器的左侧或右侧设置动画。如果您想这样做，需要做更多的工作。