在同一个div中淡出淡出

Question

我有这段代码：

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

在此代码中，我希望来自priceDiv的旧数据慢慢淡出，新数据会慢慢淡入priceDiv。

结果保存了ajax请求中的新数据。

我已经成功地用旧数据逐渐消失，但淡入淡出再次显示旧数据，当它完成新数据显示时没有效果。

Answer 1

您应该使用fadeOut的回调方法来设置数据和fadeIn

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

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

Answer 2

根据@Satpal的说法，尝试以下方法。

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

保存变量中的元素，以防止jQuery在每次调用时都必须重新遍历DOM。效率更高。

Answer 3

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