Question

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

我希望div快速淡化为白色，然后在动态更新时返回原始颜色，以便用户可以看到计算出的总数已经发生变化。

我一直在努力搜索但没有成功，我尝试添加divobj.css（{opacity：0}）。fadeTo（＆＃34; normal＆＃34;，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();
    }

}

你会看到那里还有其他一些事情正在转变为货币，拆分计算的总数以便我可以格式化小数和一些数学，但这不会影响到什么我试图实现它吗？

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

Ajax淡化div动态更新

1 个答案: