在同一个div中淡出淡出

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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