如何为文本制作动画

Question

我正在尝试创建一个包含多个下拉菜单的表单。选择其中一个下拉菜单后，div 会更新为新价格。我还希望价格具有动画效果，以便显示从下拉菜单移动到 div。

下面的代码正确地更新了价格，并且有一个从下拉菜单到 div 的动画颜色条。但它只是一个颜色条。我想让新价格本身在两者之间浮动。或者，理想情况下，让一些图像漂浮在两者之间。任何人都可以找到执行此操作的方法，或者如果我一开始就采取了错误的方法？

我正在使用此处找到的动画 javascript：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 (+.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 (+0.00)</option>
            </select>
        </div>

    </form>
</div>

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

    function CalculatePrice() {
        var main_price = '';
        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无法将内容放入移动块中，但可能有图像。查看 https://github.com/EmilStenstrom/jQuery-animate_from_to#options.

上的选项

模块（https://github.com/EmilStenstrom/jQuery-animate_from_to/blob/master/jquery.animate_from_to-1.0.js）的代码没有那么大和开放，可以自己定制。

如何为文本制作动画

How to animate text

jquery

text

jquery-animate