在同一個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);
    });
}