CODEWITHSUNDEEP
jqueryanimationfadejquery-animatetransition
Josh
Josh

Reputation: 16532

Transition the text inside a div

I have a table of line items with amounts and the user can select or deselect items. I have an element on the page that when a change occurs in the selection(s), a total is computed for the selected items.

Here's what my function looks like that sums the values.

function ComputeTotalPayment() {
    var sum = 0;

    $.each($("[id^='payment-amount-']"), function () {
        //...compute sum here
    });

    if ($('amount-total'))
        $('#amount-total').text('$' + sum.toFixed(2));  //display
}

When I change the text of amount-total (a div), is there a way to get the numbers to fade from the old value into the new value?

Upvotes: 1

Views: 517

Answers (3)

qwertymk
qwertymk

Reputation: 35256

You could make a clone of the dom object, position in the same spot as old one then fade out the old while fading in the new one then delete the old one.

Upvotes: 0

Shurdoof
Shurdoof

Reputation: 1719

Something like this?:

$("#amount-total").fadeOut(function(){ $(this).text("test").fadeIn(); })

Upvotes: 3

JakeParis
JakeParis

Reputation: 11210

Upon changing the text, you could first fade the text, then make the content change, then fade it back in

Upvotes: 1

Related Questions