CODEWITHSUNDEEP
jqueryhtmlanimation
Reminisce
Reminisce

Reputation: 101

How to replace div content with animation in JQuery?

I need to change the content of the div (only 1 image element) with animation. Would be good if we can do it with according to direction variable. It should work as 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 to use this solution, but it changes the layout and it's just fading animation. 

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

Only JQuery scripting solutions are needed. Thanks !

UPD: Can we fade in the new image WHILE fading away old one?

Upvotes: 3

Views: 2941

Answers (1)

Konstantin Dinev
Konstantin Dinev

Reputation: 34905

When the new image is loaded you can fadeOut() the old one and fadeIn() the new one:

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

Upvotes: 3

Related Questions