动态更新时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');
});

可能可用的另一种选择是使用带有最少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