Ajax淡化div动态更新

Question

I have an ajax form that calculates a total and dynamically updates a div with that total based upon form selects.

I would like the div to quickly fade to white and then back to it's original colour when it is dynamically updated, so that the user can see that the calculated total has changed.

I've searched long and hard but with no success, I've tried adding divobj.css({ opacity: 0 }).fadeTo("normal",1); inside the calculateTotal() function but that doesn't seem to work..

    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();
    }

}

You'll see there's a couple of other things going on in there like converting to currency, splitting the calculated total so I can format the decimals and some maths, but that wouldn't affect what I'm trying to achieve would it?

Answer 1

Try this if you don't mind using JQuery (if not just ask and I will revise the answer).

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

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

There are also optional call back function parameters. Check this out...

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

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

Another option that might be available is to use CSS with a minimum of 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;
}

Then just change the inline style with JavaScript/JQuery like this...

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