我需要用动画改变 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:我们可以在淡出旧图像的同时淡入新图像吗?
最佳答案
当加载新图像时,您可以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 - 如何在 JQuery 中用动画替换 div 内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30701349/