Question

我打算设计一个带有标尺的条形图，在页面加载时，它会在条形图上移动，直到达到为其定义的数字并停止：

我的代码如下：

<div id="t1" class="grad" style="background-color:Aqua;width:100px;height:20px;float:leftmargin-top:4px">
<div id="d" style="width:100px;height:20px; float:left;margin-top:4px;font-size:13px;">tone63%</div>
</div>
<div id="t2" class="top-to-bottom" style="float:left;width:0px;height:28px;border-right-  color:#FCE805;border-right-style:solid;border-right-width:4px;position:absolute;">
</div>

和javascript：

            $("#t2").top = $("#t1").offset.top;
        $("#t2").left = $("#t1").offset.left;
        $("#t2").animate({ width: 60 }, 3000);

以下是jfiddle链接：

http://jsfiddle.net/hminaee/wGkxc/4/

现在的问题是：如果你看到栏内的文字，它总是写成63％，但我希望它是动态的，我的意思是当仪表在栏上移动时数字正在变化（显示位置衡量那个酒吧）

如果有人能帮助我，我感激不尽？

Answer 1

您必须使用animate（step或progress）的回调，请参阅http://api.jquery.com/animate/

示例：

$("#t2").top = $("#t1").offset.top;
$("#t2").left = $("#t1").offset.left;
$("#t2").animate({ width: 60}, {duration: 3000, progress: function(){
    $('#d').text('tone '+$(this).width()+'%');
}});

http://jsfiddle.net/wGkxc/10/

如何在另一个div中显示移动div的位置

1 个答案: