我正在尝试创建一个有多个下拉列表的表单。选择其中一个下拉菜单时,将使用新价格更新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>
答案 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)没有那么大和开放,所以你可以自己定制。