动态更新上的 Ajax 淡化 div答案

【问题标题】：Ajax fade div on dynamic update动态更新上的 Ajax 淡化 div
【发布时间】：2015-10-02 09:56:19
【问题描述】：

我有一个 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 = "&pound;" + j[0] + ".".sup() + j[1].sup(); //Re-join split decimal & display
    } else {
    divobj.innerHTML = "&pound;" + j69[0] + ".".sup() + j69[1].sup();
    }

}

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

【问题讨论】：

标签： php jquery html css ajax

【解决方案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');
});

另一个可能的选择是使用带有最少 JavaScript 的 CSS。

#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

【讨论】：

谢谢你，我更喜欢 CSS 选项，但它似乎不起作用。元素不会褪色，如果我只包含 document.getElementById('jackedPrice').style.opacity = '0'; //淡出，但当淡入也存在时不淡出
今天下午我会做一个 jsfiddle 并进行实验。