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);
        });
    }
});

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

1 个答案: