How to animate text

Question

I'm trying to create a form where there are multiple dropdowns. When one of the dropdowns is selected, a div is updated with the new price. I also want the price to be animated so that it shows moving from the dropdown to the div.

The code below updates the price correctly and there is an animated color bar that goes from the dropdown to the div. But it is just a color bar. I would like to have the new price itself float between the two. Or, ideally, to have some image float between the two. Can anyone see a way to do this or if I'm taking the wrong approach in the first place?

I'm using the animate javascript found here: https://github.com/EmilStenstrom/jQuery-animate_from_to.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="javascript/jquery.animate_from_to-1.0.js"></script>

<div class="contentContainer">
    <form name="prices" action="" method="post" id="prices">
        <div class="showprice"></div>

        <div>Slide:</div>
        <div>
            <select name="id[11]" class="pullDown" id="attrdrop0">
                <option class="pink" value="31`">No</option>
                <option class="pink" value="32">Yes (+$40.00)</option>
            </select>
        </div>

        <div>Ready:</div>
        <div>
            <select name="id[10]" class="pullDown" id="attrdrop1">
                <option class="pink" value="31">No</option>
                <option class="pink" value="32">Yes (+$150.00)</option>
            </select>
        </div>

    </form>
</div>

<script>
    $(function() {
        $("#prices").change(function() {
            CalculatePrice();
        });
    });

    function CalculatePrice() {
        var main_price = '$50';
        main_price = Number(main_price.replace(/[^0-9\.-]+/g, ""));
        var cur_price = 0;
        var ttl_price = 0;

        $(":input.select, :input").each(function() {
            cur_price = $('option:selected', $(this)).text();
            cur_price = Number(cur_price.replace(/[^0-9\.-]+/g, ""));
            ttl_price += cur_price;
        });

        ttl_price = main_price + ttl_price;
        SetPrice(ttl_price);
    }

    function SetPrice(ttl_price) {
        $("#attrdrop1").animate_from_to('div.showprice', {
            pixels_per_second: 100,
            initial_css: {
                'background': 'yellow',
                'color': 'red',
            }
        });
        $('div.showprice').text("$" + ttl_price);
    }
</script>

Answer 1

jquery.animate_from_to is unable to place the content inside the moving blocks, but that there may be an image. Look at the Options on https://github.com/EmilStenstrom/jQuery-animate_from_to#options.

The code of the module (https://github.com/EmilStenstrom/jQuery-animate_from_to/blob/master/jquery.animate_from_to-1.0.js) is not as big and open, so that you can customize for yourself.