How do I replace the content of a div with animation in JQuery?
I need to change the content of a div (only 1 image element) with animation. It would be nice if we can do it according to the direction variable. It should work like a slideshow.
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);
}
});
I tried using this solution, but it changes the layout and it just freezes.
$('#map').fadeOut("slow", function(){
var div = $("<div id='map'>"+img2+"</div>").hide();
$(this).replaceWith(div);
$('#map').fadeIn("slow");
});
Only JQuery scripts are required. Thank!
UPD: Can we fade in the new image when you fade in the old one?
+3
source to share
1 answer
When a new image is loaded, you can fadeOut()
old and fadeIn()
new:
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);
});
}
});
+2
source to share