CODEWITHSUNDEEP
javascriptjquery
user3071235
user3071235

Reputation: 17

fadeIn fadeout in the same div

I have this code:

success:function(result) {
  $('#priceDiv').fadeOut(3000);
  $('#priceDiv').fadeIn(3000,function(){
    document.getElementById("priceDiv").innerHTML = result;
  });

In this code I want the old data from priceDiv to slowly fade out and the new data slowly fade in, in the priceDiv.

The result holds the new data from an ajax request.

I have already succeeded slowly fade out with old data but the fade in show the old data again and when it's finish the new data show with no effect.

Upvotes: 1

Views: 242

Answers (3)

War10ck
War10ck

Reputation: 12508

Building off of what @Satpal said, try the following.

$('#priceDiv').fadeOut(3000, function(){
    var $this = $(this);
    $this.html(result);
    $this.fadeIn(3000);
});

Save off the element in a variable to prevent jQuery from having to re-traverse the DOM on each call. It's more efficient.

Upvotes: 1

suren
suren

Reputation: 981

success:function(result) {   
 $('#priceDiv').fadeOut(3000, function(){
        $(this).html(result);
        $(this).fadeIn(3000);
    });
}

Upvotes: 0

Satpal
Satpal

Reputation: 133403

You should use callback method of fadeOut to set data and the fadeIn

$('#priceDiv').fadeOut(3000, function(){
    //Set new Data
    document.getElementById("priceDiv").innerHTML = result;

    //Fade in with new data
    $('#priceDiv').fadeIn(3000);
});

Upvotes: 2

Related Questions