Ajax fade div для динамического обновления

Question

У меня есть форма ajax, которая вычисляет общее количество и динамически обновляет div с этой суммой, основанной на выборе формы.

Я бы хотел, чтобы div быстро исчезал до белого, а затем вернулся к его первоначальному цвету, когда он динамически обновляется, так что пользователь может видеть, что расчетное значение изменилось.

Я искал долго и упорно, но без успеха, я попытался добавить divobj.css. ({Непрозрачности: 0}) fadeTo ("нормальный", 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