如何为文字制作动画

时间:2015-06-09 18:20:00

标签: jquery text jquery-animate

我正在尝试创建一个有多个下拉列表的表单。选择其中一个下拉菜单时,将使用新价格更新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 (+$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>

1 个答案:

答案 0 :(得分:0)

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)没有那么大和开放,所以你可以自己定制。