php - Ajax 在动态更新时淡化 div

Question

我有一个 ajax 表单，它可以计算总数并根据表单选择使用该总数动态更新 div。

我希望 div 快速淡化为白色，然后在动态更新时恢复为原始颜色，以便用户可以看到计算的总计已更改。

我搜索了很长时间但没有成功，我尝试添加 divobj.css({ opacity: 0 }).fadeTo("normal",1);在 calculateTotal() 函数中，但这似乎不起作用..

    function calculateTotal()
{
    var divobj = document.getElementById('jackedPrice');
    var final3Monthly = toCurrency(matrix[cakePrice]);
    var final69Monthly = toCurrency((matrix[cakePrice]) * (termz3plus[termPoop]) / remainPoop)
    divobj.style.display='block';
    divobj.css({ opacity: 0 }).fadeTo("normal",1);

    var j = final3Monthly; //Split decimal place to sup pence
    j = j.split(".");

    var j69 = final69Monthly;
    j69 = j69.split(".");

    if (initialPoop == '3') {
    divobj.innerHTML = "£" + j[0] + ".".sup() + j[1].sup(); //Re-join split decimal & display
    } else {
    divobj.innerHTML = "£" + j69[0] + ".".sup() + j69[1].sup();
    }

}

您会看到其中还有一些其他事情正在发生，例如转换为货币、拆分计算出的总数以便我可以格式化小数和一些数学运算，但这不会影响我想要实现的目标是吗？

Answer 1

如果您不介意使用 JQuery，请试试这个(如果不介意的话，我会修改答案)。

$('#jackedPrice').animate({opacity:'0'},300);

$('#jackedPrice').animate({opacity:'1'},300);

还有可选的回调函数参数。检查一下...

$('#jackedPrice').animate({opacity:'0'},300, function(){
   console.log('the animation is complete');
});

$('#jackedPrice').animate({opacity:'1'},300,function(){
  console.log('the animation is complete');
});

另一个可能可用的选项是使用 CSS 和最少的 JavaScript。

#jackedPrice {
    -o-transition:opacity .3s ease;
    -moz-transition:opacity .3s ease;
    -webkit-transition:opacity .3s ease;
    -ms-transition:opacity .3s ease;
    transition:opacity .3s ease;
}

然后像这样用 JavaScript/JQuery 改变内联样式...

document.getElementById('jackedPrice').style.opacity = '0'; //fade out
document.getElementById('jackedPrice').style.opacity = '1'; //fade in